Consistency of icons

src/js/components/ContextMenuTrigger.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
+import Icon from './Icon'
 
 export default class ContextMenuTrigger extends React.Component{
 
@@ -20,12 +20,8 @@ export default class ContextMenuTrigger extends React.Component{
 			className += ' '+this.props.className
 		}
 		return (
-			<span
-				className={className}
-				onClick={e => this.handleClick(e)}>
-					<span className="dot"></span>
-					<span className="dot"></span>
-					<span className="dot"></span>
+			<span className={className} onClick={e => this.handleClick(e)}>
+				<Icon name="more_horiz" />
 			</span>
 		);
 	}

src/js/components/Fields/VolumeControl.js

@@ -1,6 +1,6 @@
 
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
+import Icon from '../Icon'
 
 export default class VolumeControl extends React.Component{
 
@@ -53,14 +53,14 @@ export default class VolumeControl extends React.Component{
 		if (this.props.mute){
 			return (
 				<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(false)}>
-					<FontAwesome className="red-text" name="volume-off" />
+					<Icon className="red-text" name="volume_off" />
 					<span className="tooltip">Unmute</span>
 				</a>
 			)
 		} else {
 			return (
 				<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(true)}>
-					<FontAwesome className="muted" name="volume-off" />
+					<Icon className="muted" name="volume_mute" />
 					<span className="tooltip">Mute</span>
 				</a>
 			)

src/js/components/List.js

@@ -9,6 +9,7 @@ import ArtistSentence from './ArtistSentence'
 import Dater from './Dater'
 import URILink from './URILink'
 import ContextMenuTrigger from './ContextMenuTrigger'
+import Icon from './Icon'
 
 import * as helpers from '../helpers'
 import * as uiActions from '../services/ui/actions'
@@ -78,7 +79,7 @@ class List extends React.Component{
 		if (key_string === 'added_at') return <span><Dater type="ago" data={value} /> ago</span>
 		if (key_string === 'owner') return <URILink type="user" uri={value.uri}>{value.id}</URILink>
 		if (key[0] === 'artists') return <ArtistSentence artists={value} />
-		if (value === true) return <FontAwesome name="check" />
+		if (value === true) return <Icon name="check" />
 		if (typeof(value) === 'number') return <span>{value.toLocaleString()}</span>
 		return <span>{value}</span>
 	}

src/js/components/Track.js

@@ -308,7 +308,7 @@ export default class Track extends React.Component{
 		}
 
 		track_actions.push(
-			<ContextMenuTrigger key="context" onTrigger={e => this.props.handleContextMenu(e)} />
+			<ContextMenuTrigger className="subtle" key="context" onTrigger={e => this.props.handleContextMenu(e)} />
 		)
 
 		// If we're touchable, and can sort this tracklist
@@ -319,7 +319,7 @@ export default class Track extends React.Component{
 				<span 
 					className="drag-zone touch-draggable mouse-draggable"
 					key="drag-zone">
-						<FontAwesome name="bars" fixedWidth />
+						<Icon name="drag_indicator" />
 				</span>
 			)
 		}