Committing to Material icons

src/js/components/Fields/DropdownField.js

@@ -4,6 +4,8 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
+import Icon from '../Icon';
+
 export default class DropdownField extends React.Component{
 
 	constructor(props){
@@ -107,9 +109,9 @@ export default class DropdownField extends React.Component{
 			current_value = this.props.options[0].value;
 		}
 
-		var selected_icon = <FontAwesome name="check" />
+		var selected_icon = <Icon name="check" />
 		if (this.props.selected_icon){
-			selected_icon = <FontAwesome name={this.props.selected_icon} />
+			selected_icon = <Icon name={this.props.selected_icon} />
 		}
 
 		var options = Object.assign([], this.props.options);
@@ -124,7 +126,7 @@ export default class DropdownField extends React.Component{
 		return (
 			<div className={className} data-uid={this.uid}>
 				<div className={"label"+(this.props.button ? " button "+this.props.button : "")} onClick={e => this.setExpanded()}>
-					{this.props.icon ? <span><FontAwesome name={this.props.icon} />&nbsp; </span> : null}
+					{this.props.icon ? <Icon name={this.props.icon} type={this.props.icon_type ? this.props.icon_type : "material"} /> : null}
 					<span className="text">
 						{this.props.name}
 						{this.isMultiSelect() ? ' ('+current_value.length+')' : null}

src/js/components/Fields/FilterField.js

@@ -1,7 +1,8 @@
 
 import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
-import FontAwesome from 'react-fontawesome'
+
+import Icon from '../Icon';
 
 export default class FilterField extends React.Component{
 
@@ -58,7 +59,7 @@ export default class FilterField extends React.Component{
 		return (
 			<span className={"filter-field "+(this.state.active ? 'active' : '')} onClick={e => this.activate()}>
 				<form>
-					<FontAwesome name="search" />
+					<Icon name="search" type="material" />
 					<input
 						type="text"
 						placeholder="Filter"

src/js/components/Fields/PlaybackControls.js

@@ -128,10 +128,10 @@ class PlaybackControls extends React.Component{
 
 				<section className="triggers">
 					<a className="control expanded-controls" onClick={() => this.setState({expanded: !this.state.expanded})}>
-						{this.state.expanded ? <FontAwesome name="chevron-down" /> : <FontAwesome name="chevron-up" />}
+						{this.state.expanded ? <Icon name="expand_more" type="material" /> : <Icon name="expand_less" type="material" />}
 					</a>
 					<a className={"control sidebar-toggle"+(this.props.sidebar_open ? ' open' : '')} onClick={() => this.props.uiActions.toggleSidebar()}>
-						<Icon className="open" name="bars" type="fontawesome" />
+						<Icon className="open" name="menu" type="material" />
 					</a>
 				</section>
 				

src/js/components/Icon.js

@@ -15,16 +15,12 @@ export default class Icon extends React.Component{
 		}
 
 		switch (this.props.type){
-			case 'material':
-				className += ' material-icon';		
-				return <i className={className}>{this.props.name}</i>;
-
 			case 'fontawesome':	
 				return <FontAwesome name={this.props.name} />;
 
 			default:
-				className += ' icon-'+this.props.name;		
-				return <i className={className}></i>;
+				className += ' material-icon';		
+				return <i className={className}>{this.props.name}</i>;
 		}
 	}
 }