Everything goes through Icon now

src/js/components/AlbumGrid.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import { hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'

src/js/components/ArtistGrid.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import { hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from './Thumbnail'
 import GridItem from './GridItem'

src/js/components/ArtistSentence.js

@@ -1,6 +1,5 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
 import URILink from './URILink'
 
 export default class ArtistSentence extends React.Component{

src/js/components/Fields/ConfirmationButton.js

@@ -1,6 +1,5 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
 
 export default class ConfirmationButton extends React.Component{
 

src/js/components/Fields/DropdownField.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Icon from '../Icon';
 

src/js/components/Fields/FollowButton.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'

src/js/components/Fields/LastfmAuthenticationFrame.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import ReactGA from 'react-ga'
-import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from '../Thumbnail'
 

src/js/components/Fields/LastfmLoveButton.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'

src/js/components/Fields/PlaybackControls.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import ProgressSlider from './ProgressSlider'
 import VolumeControl from './VolumeControl'

src/js/components/Fields/SearchForm.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { hashHistory } from 'react-router'
 import { createStore, bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../../helpers'
 import * as uiActions from '../../services/ui/actions'

src/js/components/Fields/SpotifyAuthenticationFrame.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import ReactGA from 'react-ga'
-import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from '../Thumbnail'
 

src/js/components/GridItem.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Link, hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../helpers'
 import Thumbnail from './Thumbnail'
@@ -104,7 +103,7 @@ export default class GridItem extends React.Component{
 					{item.name ? item.name : <span className="dark-grey-text">{item.uri}</span>}
 				</div>
 				<div className="secondary">					
-					{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(item.uri)} className="source" /> : null}
+					{this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null}
 					{this.renderSecondary(item)}
 				</div>
 			</div>

src/js/components/GridSlider.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import { Link, hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import ArtistSentence from './ArtistSentence'
 import Thumbnail from './Thumbnail'
@@ -61,8 +60,8 @@ class GridSlider extends React.Component{
 				<div className={className}>
 					{ this.props.title ? this.props.title : null }
 					<div className="controls">
-						<FontAwesome name="chevron-left" disabled={this.state.page <= 0} onClick={ () => this.previous() } />
-						<FontAwesome name="chevron-right" disabled={this.state.page >= this._pagelimit} onClick={ () => this.next() } />
+						<Icon type="fontawesome" name="chevron-left" disabled={this.state.page <= 0} onClick={ () => this.previous() } />
+						<Icon type="fontawesome" name="chevron-right" disabled={this.state.page >= this._pagelimit} onClick={ () => this.next() } />
 					</div>
 					<div className="grid-slider">
 						<div className="grid artist-grid liner" style={style}>

src/js/components/Header.js

@@ -1,6 +1,5 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
 
 import Icon from './Icon'
 import ContextMenuTrigger from './ContextMenuTrigger'

src/js/components/Icon.js

@@ -8,6 +8,12 @@ export default class Icon extends React.Component{
 		super(props);
 	}
 
+	handleClick(e){
+		if (this.props.onClick){
+			this.props.onClick(e);
+		}
+	}
+
 	render(){
 		var className = "icon";
 		if (this.props.className){
@@ -16,11 +22,11 @@ export default class Icon extends React.Component{
 
 		switch (this.props.type){
 			case 'fontawesome':	
-				return <FontAwesome name={this.props.name} />;
+				return <FontAwesome type="fontawesome" name={this.props.name} onClick={e => this.handleClick(e)} />;
 
 			default:
 				className += ' material-icon';		
-				return <i className={className}>{this.props.name}</i>;
+				return <i className={className} onClick={e => this.handleClick(e)}>{this.props.name}</i>;
 		}
 	}
 }

src/js/components/LazyLoadListener.js

@@ -1,6 +1,5 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
 
 export default class LazyLoadListener extends React.Component{
 

src/js/components/List.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import { hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'

src/js/components/Modal/AddToPlaylistModal.js

@@ -1,6 +1,5 @@
 
-import React, { PropTypes } from 'react';
-import FontAwesome from 'react-fontawesome';
+import React, { PropTypes } from 'react';;
 
 import Icon from '../Icon';
 import Thumbnail from '../Thumbnail';
@@ -56,7 +55,7 @@ export default class AddToPlaylistModal extends React.Component{
 									<Thumbnail images={playlist.images} size="small" />
 									<h3 className="name">{ playlist.name }</h3>
 									<ul className="details">
-										<li><FontAwesome className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
+										<li><Icon type="fontawesome" className="source" name={helpers.sourceIcon(playlist.uri)} /></li>
 										<li>{ playlist.tracks_total ? <span className="grey-text">&nbsp;{ playlist.tracks_total } tracks</span> : null }</li>
 									</ul>
 								</div>

src/js/components/Modal/AddToQueueModal.js

@@ -1,6 +1,5 @@
 
-import React, { PropTypes } from 'react';
-import FontAwesome from 'react-fontawesome';
+import React, { PropTypes } from 'react';;
 
 import Icon from '../Icon';
 import * as helpers from '../../helpers';

src/js/components/Modal/CreatePlaylistModal.js

@@ -1,6 +1,5 @@
 
-import React, { PropTypes } from 'react';
-import FontAwesome from 'react-fontawesome';
+import React, { PropTypes } from 'react';;
 
 import Icon from '../Icon';
 import * as helpers from '../../helpers';

src/js/components/Modal/EditRadioModal.js

@@ -1,6 +1,5 @@
 
-import React, { PropTypes } from 'react';
-import FontAwesome from 'react-fontawesome';
+import React, { PropTypes } from 'react';;
 
 import Icon from '../Icon';
 import * as helpers from '../../helpers';
@@ -168,7 +167,7 @@ export default class EditRadioModal extends React.Component{
 										{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
 										{!seed.unresolved ? <span className="grey-text">&nbsp;({seed.type})</span> : null}
 										<button className="discrete remove-uri no-hover"  onClick={e => this.removeSeed(seed.uri)}>
-											<FontAwesome name="trash" />
+											<Icon type="fontawesome" name="trash" />
 										</button>
 									</div>
 								)
@@ -206,7 +205,7 @@ export default class EditRadioModal extends React.Component{
 							onChange={e => this.setState({uri: e.target.value, error_message: null})} 
 							value={this.state.uri} />
 						<span className="button discrete add-uri no-hover" onClick={e => this.addSeed()}>
-							<FontAwesome name="plus" />&nbsp; Add
+							<Icon type="fontawesome" name="plus" />&nbsp; Add
 						</span>
 						{this.state.error_message ? <span className="description error">{this.state.error_message}</span> : null}
 					</div>

src/js/components/Modal/InitialSetupModal.js

@@ -1,6 +1,5 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
 
 import Icon from '../Icon'
 import * as helpers from '../../helpers'

src/js/components/Modal/Modal.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../../helpers'
 import Icon from '../Icon'

src/js/components/Modal/SearchURISchemesModal.js

@@ -1,6 +1,5 @@
 
-import React, { PropTypes } from 'react';
-import FontAwesome from 'react-fontawesome';
+import React, { PropTypes } from 'react';;
 import Sortable from 'react-sortablejs';
 
 import Icon from '../Icon';
@@ -65,10 +64,10 @@ export default class SearchURISchemesModal extends React.Component{
 								this.state.schemes.map(scheme => {
 									return (
 										<div className="list-item draggable" key={scheme} data-id={scheme}>
-											<FontAwesome className="grey-text drag-handle" name="bars" />
+											<Icon type="fontawesome" className="grey-text drag-handle" name="bars" />
 											{scheme.replace(':','')}
 											<button className="discrete remove-uri no-hover" onClick={e => this.handleToggle(scheme)}>
-												<FontAwesome name="trash" />
+												<Icon type="fontawesome" name="trash" />
 											</button>
 										</div>
 									)
@@ -87,7 +86,7 @@ export default class SearchURISchemesModal extends React.Component{
 										onClick={e => this.handleToggle(scheme)}>
 											{scheme.replace(':','')}
 											&nbsp;&nbsp;
-											<FontAwesome name="plus" />
+											<Icon type="fontawesome" name="plus" />
 									</div>
 								)
 							})

src/js/components/Notifications.js

@@ -1,6 +1,6 @@
 
-import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
+import React, { PropTypes } from 'react';
+import Icon from './Icon';
 
 export default class Notifications extends React.Component{
 
@@ -26,14 +26,14 @@ export default class Notifications extends React.Component{
 							case 'shortcut':
 								return (
 									<div className={"notification shortcut-notification"+(notification.closing ? ' closing' : '')} key={notification.key} data-duration={notification.duration}>
-										<FontAwesome name={notification.content} />
+										<Icon type="fontawesome" name={notification.content} />
 									</div>
 								)
 
 							default:
 								return (
 									<div className={notification.type+" notification"+(notification.closing ? ' closing' : '')} key={notification.key} data-key={notification.key} data-duration={notification.duration}>
-										<FontAwesome name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key, true) } />
+										<Icon name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key, true) } />
 										{notification.title ? <h4>{notification.title}</h4> : null}
 										<p className="content" dangerouslySetInnerHTML={{__html: notification.content}}></p>
 										{notification.description ? <p className="description" dangerouslySetInnerHTML={{__html: notification.description}}></p> : null }
@@ -63,7 +63,7 @@ export default class Notifications extends React.Component{
 							</div>
 						</div>
 						{process.message}
-						<FontAwesome name="close" className="close-button" onClick={e => {this.props.uiActions.cancelProcess(process.key)}} />
+						<Icon name="close" className="close-button" onClick={e => {this.props.uiActions.cancelProcess(process.key)}} />
 					</div>
 				)
 

src/js/components/PlaylistGrid.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 import { hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'

src/js/components/PusherConnectionList.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
 
-import FontAwesome from 'react-fontawesome'
 
 import * as pusherActions from '../services/pusher/actions'
 

src/js/components/Services.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from './Thumbnail'
 import Icon from './Icon'
@@ -273,7 +272,7 @@ class Services extends React.Component{
 		if (this.props.lastfm.session && this.props.core.users["lastfm:user:"+this.props.lastfm.session.name]){
 			var lastfm_icon = <Thumbnail circle={true} size="small" images={this.props.core.users["lastfm:user:"+this.props.lastfm.session.name].image} />
 		} else {
-			var lastfm_icon = <FontAwesome name="lastfm" />
+			var lastfm_icon = <Icon type="fontawesome" name="lastfm" />
 		}
 
 		return (
@@ -298,7 +297,7 @@ class Services extends React.Component{
 				</div>
 				<div className="menu-item-wrapper">
 					<Link className={"menu-item"+(this.props.active == 'snapcast' ? ' active' : '')} to={this.props.active == 'snapcast' ? global.baseURL+'settings' : global.baseURL+'settings/service/snapcast'}>
-						<FontAwesome name="sliders" />
+						<Icon type="fontawesome" name="sliders" />
 						<div className="title">
 							Snapcast
 						</div>
@@ -307,7 +306,7 @@ class Services extends React.Component{
 				</div>
 				<div className="menu-item-wrapper">
 					<Link className={"menu-item"+(this.props.active == 'icecast' ? ' active' : '')} to={this.props.active == 'icecast' ? global.baseURL+'settings' : global.baseURL+'settings/service/icecast'}>
-						<FontAwesome name="rss" />
+						<Icon type="fontawesome" name="rss" />
 						<div className="title">
 							Icecast
 						</div>

src/js/components/Sidebar.js

@@ -8,7 +8,6 @@ import Icon from './Icon'
 import Dropzones from './Fields/Dropzones'
 import Thumbnail from './Thumbnail'
 
-import FontAwesome from 'react-fontawesome'
 import * as uiActions from '../services/ui/actions'
 import * as mopidyActions from '../services/mopidy/actions'
 
@@ -102,7 +101,7 @@ class Sidebar extends React.Component{
 		       	<Dropzones />
 
 		       	<div className="close" onClick={e => this.props.uiActions.toggleSidebar(false)}>
-		       		<FontAwesome name="chevron-right" />
+		       		<Icon name="close" />
 		       	</div>
 
 			</aside>

src/js/components/Snapcast.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link, hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import ArtistSentence from './ArtistSentence'
 import VolumeControl from './Fields/VolumeControl'

src/js/components/Thumbnail.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createStore, bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -84,7 +83,7 @@ class Thumbnail extends React.Component{
 		
 		var zoom_icon = null;
 		if (this.props.canZoom){
-			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><FontAwesome name="search" /></span>;
+			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><Icon type="fontawesome" name="search" /></span>;
 		}
 
 		return (

src/js/components/Track.js

@@ -2,7 +2,7 @@
 import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
 
-import FontAwesome from 'react-fontawesome'
+import Icon from './Icon'
 import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'
 import URILink from './URILink'
@@ -253,7 +253,7 @@ export default class Track extends React.Component{
 			)
 			if (this.props.show_source_icon){
 				track_columns.push(
-					<FontAwesome name={helpers.sourceIcon(track.uri)} className="source" key="source" fixedWidth />
+					<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} className="source" key="source" fixedWidth />
 				)
 			}
 			track_columns.push(
@@ -287,7 +287,7 @@ export default class Track extends React.Component{
 			)
 			if (this.props.show_source_icon){
 				track_columns.push(
-					<FontAwesome name={helpers.sourceIcon(track.uri)} className="source" key="source" fixedWidth />
+					<Icon type="fontawesome" name={helpers.sourceIcon(track.uri)} className="source" key="source" fixedWidth />
 				)
 			}
 			track_columns.push(

src/js/components/TrackList.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Track from './Track'
 import ContextMenuTrigger from './ContextMenuTrigger'

src/js/views/Album.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Header from '../components/Header'
 import TrackList from '../components/TrackList'
@@ -154,7 +153,7 @@ class Album extends React.Component{
 					<h1>{ this.props.album.name }</h1>
 
 					<ul className="details">
-						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon(this.props.params.uri )} /><span className="tooltip">{helpers.uriSource(this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
+						{ !this.props.slim_mode ? <li className="has-tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.params.uri )} /><span className="tooltip">{helpers.uriSource(this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
 						{ !this.props.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
 						{ this.props.album.date ? <li><Dater type="date" data={ this.props.album.date } /></li> : null }
 						<li>

src/js/views/Artist.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import LazyLoadListener from '../components/LazyLoadListener'
 import Header from '../components/Header'
@@ -157,9 +156,9 @@ class Artist extends React.Component{
 						<div className="col w40 tiles artist-stats">
 							{this.props.artist.images ? <div className="tile thumbnail-wrapper"><Thumbnail size="huge" canZoom images={this.props.artist.images} /></div> : null}
 							{this.props.artist.images_additional ? <div className="tile thumbnail-wrapper"><Thumbnail size="huge" canZoom images={this.props.artist.images_additional} /></div> : null}
-							{this.props.artist.followers ? <div className="tile"><span className="content"><FontAwesome name="users" />{this.props.artist.followers.total.toLocaleString() } followers</span></div> : null}
-							{this.props.artist.popularity ? <div className="tile"><span className="content"><FontAwesome name="fire" />{this.props.artist.popularity }% popularity</span></div> : null}
-							{this.props.artist.listeners ? <div className="tile"><span className="content"><FontAwesome name="headphones" />{ this.props.artist.listeners.toLocaleString() } listeners</span></div> : null }
+							{this.props.artist.followers ? <div className="tile"><span className="content"><Icon type="fontawesome" name="users" />{this.props.artist.followers.total.toLocaleString() } followers</span></div> : null}
+							{this.props.artist.popularity ? <div className="tile"><span className="content"><Icon type="fontawesome" name="fire" />{this.props.artist.popularity }% popularity</span></div> : null}
+							{this.props.artist.listeners ? <div className="tile"><span className="content"><Icon type="fontawesome" name="headphones" />{ this.props.artist.listeners.toLocaleString() } listeners</span></div> : null }
 						</div>
 
 						<div className="col w60 biography">

src/js/views/Debug.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link, hashHistory } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Header from '../components/Header'
 import Thumbnail from '../components/Thumbnail'

src/js/views/Playlist.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 import ReactGA from 'react-ga'
 
 import TrackList from '../components/TrackList'
@@ -207,7 +206,7 @@ class Playlist extends React.Component{
 					{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
 
 					<ul className="details">
-						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon(this.props.params.uri )} /><span className="tooltip">{helpers.uriSource(this.props.params.uri)} playlist</span></li> : null }
+						{ !this.props.slim_mode ? <li className="has-tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.params.uri )} /><span className="tooltip">{helpers.uriSource(this.props.params.uri)} playlist</span></li> : null }
 						{ this.props.playlist.owner && !this.props.slim_mode ? <li><URILink type="user" uri={this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</URILink></li> : null }
 						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
 						{ this.props.playlist.last_modified ? <li>Edited <Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }

src/js/views/Queue.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { hashHistory, Link } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Icon from '../components/Icon'
 import Parallax from '../components/Parallax'
@@ -141,21 +140,17 @@ class Queue extends React.Component{
 		var options = (
 			<span>
 				{this.props.spotify_enabled ? <button className="no-hover" onClick={e => this.props.uiActions.openModal('edit_radio')}>
-					<Icon name="radio" />&nbsp;
-					Radio
+					<Icon name="radio" />Radio
 					{this.props.radio && this.props.radio.enabled ? <span className="flag blue">On</span> : null}
 				</button> : null}
 				<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'queue/history')}>
-					<Icon name="history" />&nbsp;
-					History
+					<Icon name="history" />History
 				</button>
 				<button className="no-hover" onClick={e => {this.props.mopidyActions.clearTracklist(); this.props.uiActions.hideContextMenu();}}>
-					<Icon name="delete_sweep" />&nbsp;
-					Clear
+					<Icon name="delete_sweep" />Clear
 				</button>
 				<button className="no-hover" onClick={e => this.props.uiActions.openModal('add_to_queue', {})}>
-					<Icon name="playlist_add" />&nbsp;
-					Add URI
+					<Icon name="playlist_add" />Add URI
 				</button>
 			</span>
 		)

src/js/views/QueueHistory.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { hashHistory } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import TrackList from '../components/TrackList'
 import Header from '../components/Header'

src/js/views/Search.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link, hashHistory } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 import ReactGA from 'react-ga'
 
 import Header from '../components/Header'
@@ -167,7 +166,7 @@ class Search extends React.Component{
 							<URILink unencoded type="search" uri={"search:all:"+term}>
 								Search
 							</URILink>
-							&nbsp; <FontAwesome name="angle-right" />&nbsp;
+							&nbsp; <Icon type="fontawesome" name="angle-right" />&nbsp;
 							Artists
 						</h4>
 						<section className="grid-wrapper">
@@ -185,7 +184,7 @@ class Search extends React.Component{
 							<URILink unencoded type="search" uri={"search:all:"+term}>
 								Search
 							</URILink>
-							&nbsp; <FontAwesome name="angle-right" />&nbsp;
+							&nbsp; <Icon type="fontawesome" name="angle-right" />&nbsp;
 							Albums
 						</h4>
 						<section className="grid-wrapper">
@@ -203,7 +202,7 @@ class Search extends React.Component{
 							<URILink unencoded type="search" uri={"search:all:"+term}>
 								Search
 							</URILink>
-							&nbsp; <FontAwesome name="angle-right" />&nbsp;
+							&nbsp; <Icon type="fontawesome" name="angle-right" />&nbsp;
 							Playlists
 						</h4>
 						<section className="grid-wrapper">
@@ -221,7 +220,7 @@ class Search extends React.Component{
 							<URILink unencoded type="search" uri={"search:all:"+term}>
 								Search
 							</URILink>
-							&nbsp; <FontAwesome name="angle-right" />&nbsp;
+							&nbsp; <Icon type="fontawesome" name="angle-right" />&nbsp;
 							Tracks
 						</h4>
 						<section className="list-wrapper">

src/js/views/Settings.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { hashHistory, Link } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import ConfirmationButton from '../components/Fields/ConfirmationButton'
 import PusherConnectionList from '../components/PusherConnectionList'
@@ -104,11 +103,11 @@ class Settings extends React.Component {
 
 	renderServerStatus(){
 		var colour = 'grey';
-		var icon = 'question-circle';
+		var icon = 'help';
 		var status = 'Unknown';
 
 		if (this.props.mopidy.connecting || this.props.pusher.connecting){
-			icon = 'plug';
+			icon = 'autorenew';
 			status = 'Connecting...'
 		} else if (!this.props.mopidy.connected || !this.props.pusher.connected){
 			colour = 'red';
@@ -122,7 +121,7 @@ class Settings extends React.Component {
 
 		return (
 			<span className={colour+'-text'}>
-				<FontAwesome name={icon} />&nbsp; {status}
+				<Icon name={icon} />{status}
 			</span>
 		);
 	}
@@ -271,7 +270,7 @@ class Settings extends React.Component {
 						<div className="name">Version</div>
 						<div className="input">
 				        	<span className="text">
-				        		{this.props.pusher.version.current} installed {this.props.pusher.version.upgrade_available ? <span className="flag blue">Upgrade available</span> : <span className="flag dark"><FontAwesome name="check" className="green-text" />&nbsp; Up-to-date</span>}
+				        		{this.props.pusher.version.current} installed {this.props.pusher.version.upgrade_available ? <span className="flag blue">Upgrade available</span> : <span className="flag dark"><Icon type="fontawesome" name="check" className="green-text" />&nbsp; Up-to-date</span>}
 				        	</span>
 				        </div>
 			        </div>
@@ -295,14 +294,14 @@ class Settings extends React.Component {
 						<br /><br />
 						<div>
 					        <a className="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=james%40barnsley%2enz&lc=NZ&item_name=James%20Barnsley&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" target="_blank">
-					        	<FontAwesome name="paypal" />&nbsp;Donate
+					        	<Icon type="fontawesome" name="paypal" />&nbsp;Donate
 					        </a>
 					        &nbsp;&nbsp;
 					        <a className="button" href="https://github.com/jaedb/Iris" target="_blank">
-					        	<FontAwesome name="github" />&nbsp;GitHub
+					        	<Icon type="fontawesome" name="github" />&nbsp;GitHub
 					        </a>
 					        &nbsp;&nbsp;
-					        <a className="button" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank"><FontAwesome name="creative-commons" />&nbsp;Licence</a>
+					        <a className="button" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank"><Icon type="fontawesome" name="creative-commons" />&nbsp;Licence</a>
 						</div>
 			        </div>
 

src/js/views/Track.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Link } from 'react-router'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Header from '../components/Header'
 import TrackList from '../components/TrackList'
@@ -232,7 +231,7 @@ class Track extends React.Component{
 					</h2>
 
 					<ul className="details">
-						{!this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon(this.props.params.uri)} /><span className="tooltip">{helpers.uriSource(this.props.params.uri)} track</span></li> : null}
+						{!this.props.slim_mode ? <li className="has-tooltip"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.params.uri)} /><span className="tooltip">{helpers.uriSource(this.props.params.uri)} track</span></li> : null}
 						{track.date ? <li><Dater type="date" data={track.date} /></li> : null}
 						{track.explicit ? <li><span className="flag dark">EXPLICIT</span></li> : null}
 						<li>

src/js/views/User.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 
 import Thumbnail from '../components/Thumbnail'
 import PlaylistGrid from '../components/PlaylistGrid'

src/js/views/discover/DiscoverRecommendations.js

@@ -2,7 +2,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
 import InputRange from 'react-input-range';
 
 import Header from '../../components/Header'
@@ -312,7 +311,7 @@ class Discover extends React.Component{
 								{seed.images ? <URILink className="thumbnail-wrapper" type={type} uri={seed.uri}><Thumbnail images={seed.images} circle={seed.type == "artist"} size="small" /></URILink> : null}
 								<div className="label">
 									{helpers.titleCase(type)}
-									<FontAwesome name="close" className="remove" onClick={() => this.removeSeed(index)} />
+									<Icon type="fontawesome" name="close" className="remove" onClick={() => this.removeSeed(index)} />
 								</div>
 								<div className="name">{seed.name}</div>
 							</div>
@@ -369,7 +368,7 @@ class Discover extends React.Component{
 								<div className="label">
 									{helpers.titleCase(tunability.name)}
 									<span className="remove" onClick={e => this.toggleTunability(tunability.name)}>
-										<FontAwesome name="close" />
+										<Icon type="fontawesome" name="close" />
 									</span>
 								</div>
 								<div className="input">
@@ -519,7 +518,7 @@ class Discover extends React.Component{
 							<AddSeedField onSelect={(e,uri) => this.handleSelect(e,uri)} />
 							<DropdownField className="add-properties" name="Properties" options={addable_tunabilities} no_status_icon button="default" handleChange={val => {this.toggleTunability(val)}} />
 							<span className={"submit button primary large"+(is_loading ? " working" : "")} onClick={e => this.getRecommendations()}>
-								<FontAwesome name="compass" />&nbsp; 
+								<Icon type="fontawesome" name="compass" />&nbsp; 
 								Find recommendations
 							</span>
 

src/js/views/library/LibraryBrowse.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link, hashHistory } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import Header from '../../components/Header'
 import List from '../../components/List'

src/js/views/library/LibraryPlaylists.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import PlaylistGrid from '../../components/PlaylistGrid'
 import List from '../../components/List'

src/js/views/library/LibraryTracks.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
-import FontAwesome from 'react-fontawesome'
 
 import TrackList from '../../components/TrackList'
 import Header from '../../components/Header'

src/scss/components/_lists.scss

@@ -45,6 +45,8 @@
 			position: absolute;
 			top: 2px;
 			right: 0;
+			font-size: 14px;
+			z-index: 2;
 
 			&:before {
 				display: none !important;
@@ -124,11 +126,11 @@
 					display: block;
 					color: $mid_grey;
 					
-					.fa {
+					.icon {
 						position: absolute;
 						top: 50%;
 						left: 10px;
-						margin-top: -6px;
+						margin-top: -8px;
 						pointer-events: none;
 					}
 				}
@@ -315,6 +317,7 @@
 					position: absolute;
 					right: 10px;
 					text-align: right;
+					z-index: 1;
 				}
 
 				&:not(.name):not(.duration):not(.album):not(.added){

src/scss/components/_notifications.scss

@@ -136,7 +136,7 @@
 		border-radius: 10px;
 		text-align: center;
 
-		.fa {
+		.icon {
 			font-size: 140px;
 			line-height: 400px;
 		}

src/scss/components/_sidebar.scss

@@ -65,6 +65,11 @@ aside{
 			.status {
 				margin-left: 5px;
 				float: right;
+
+				.icon {
+					padding-right: 0;
+					padding-left: 8px;
+				}
 			}
 
 			&.active {
@@ -105,8 +110,8 @@ aside{
 	.close {
 		display: none;
 		position: absolute;
-		bottom: 10px;
-		right: 10px;
+		bottom: 4px;
+		right: 4px;
 		padding: 10px 8px;
 		display: inline-block;
 		opacity: 0.5;

src/scss/global/_forms.scss

@@ -225,6 +225,10 @@ input[type="submit"] {
 	display: block;
 	padding-bottom: 12px;
 
+	.icon {
+		padding-right: 0.32em;
+	}
+
 	& > .name {
 		display: block;
 		padding-top: 10px;
@@ -303,7 +307,7 @@ input[type="submit"] {
 
 	&.checkbox {
 		input + .label:before {
-			font-family: FontAwesome;
+			font-family: "Material Icons";
 			font-size: 8px;
 			content: ' ';
 			color: $mid_grey;
@@ -318,7 +322,7 @@ input[type="submit"] {
 		}
 
 		input:checked + .label:before {
-			content: '\f00c';
+			content: 'check';
 		}
 	}
 

src/scss/views/_discover.scss

@@ -220,6 +220,17 @@
 			}
 		}
 
+		.actions {
+			.add-seed-field {
+				width: 69%;
+			}
+
+			.add-properties {
+				width: 30%;
+				margin-right: 0;
+			}
+		}
+
 		.col {
 			&.tracks {
 				width: 100%;