Material icons instead of font awesome

Gruntfile.coffee

@@ -61,7 +61,6 @@ module.exports = (grunt) ->
 			'scripts/services/reader/markdown.js'
 		]
 		styles: [
-			'bower_components/fontawesome/css/font-awesome.min.css'
 			'bower_components/ngDialog/css/ngDialog.css'
 			'bower_components/ngDialog/css/ngDialog-theme-default.css'
 			'bower_components/pure/pure-min.css'
@@ -191,12 +190,6 @@ module.exports = (grunt) ->
 					}}
 			}
 		}]
-		[ 'min_fonts', {
-			cwd: 'build/bower_components/fontawesome/fonts'
-			src: '*'
-			dest: 'build-min/fonts/'
-			options: {}
-		}]
 		[ 'min_readme', {
 			cwd: ''
 			src: 'README-USAGE.md'
@@ -251,7 +244,7 @@ module.exports = (grunt) ->
 
 	# Register tasks
 	grunt.registerTask 'default', [ 'coffee:main', 'copy:main', 'jade:main', 'stylus:main' ]
-	grunt.registerTask 'min', [ 'jade:min', 'copy:min', 'copy:min_fonts', 'copy:min_readme', 'uglify:min', 'cssmin:min' ]
+	grunt.registerTask 'min', [ 'jade:min', 'copy:min', 'copy:min_readme', 'uglify:min', 'cssmin:min' ]
 	grunt.registerTask 'test', [ 'default', 'connect:main', 'qunit' ]
 
 	grunt.registerTask 'serve', () ->

bower.json

@@ -6,7 +6,6 @@
 		"angular-animate": "1.2.20",
 		"angular-sanitize": "1.2.20",
 		"angular-scroll": "0.6.2",
-		"fontawesome": "4.2.0",
 		"lodash": "2.4.1",
 		"marked": "0.3.2",
 		"ngDialog": "0.3.8",

source/includes/comparison.html.jade

@@ -3,8 +3,8 @@
 		.version(ng-repeat="heading in headings")
 			.version-padded
 				.version-menu
-					.arrow.fa.fa-chevron-up(ng-show="!pick")
-					.arrow.fa.fa-chevron-down(ng-show="pick")
+					.arrow.material-icons(ng-show="!pick") keyboard_arrow_up
+					.arrow.material-icons(ng-show="pick") keyboard_arrow_down
 					.text(ng-bind-html="heading")
 
 .pick(ng-show="pick")

source/index.html.jade

@@ -6,6 +6,7 @@ html(ng-app="sideBySide" ng-controller="AppController")
 		meta(charset="utf-8")
 		meta(name="description", content="{{ description() }}")
 		link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/css?family=Alegreya:400,400italic,700&subset=latin,latin-ext,greek,greek-ext,cyrillic,cyrillic-ext,vietnamese")
+		link(rel="stylesheet", type="text/css", href="//fonts.googleapis.com/icon?family=Material+Icons")
 		if html5Mode == true
 			script.
 				html5Mode=true;
@@ -31,11 +32,11 @@ html(ng-app="sideBySide" ng-controller="AppController")
 					a(href="" ng-click="display(link.display)" ng-bind-html="link.text")
 				li
 					a(href="" ng-click="flipPick()")
-						i.fa.fa-bars
+						i.material-icons menu
 						span Compare translations
 				li
 					a(href="" ng-click="showPage('about')")
-						i.fa.fa-info-circle
+						i.material-icons star
 						span About
 
 		div(ng-controller="ComparisonController" class="cols-{{columns}}")

source/styles/style.css.styl

@@ -33,9 +33,11 @@ body
 
 .pure-menu.menu-main
 	height: 34px
-	.fa
-		font-size: 16px
+	.material-icons
+		font-size: 18px
 		margin-right: 7px
+		padding-bottom: 2px
+		vertical-align: middle
 
 .pure-menu.menu-verses
 	height: $bottom_bar_height px
@@ -45,10 +47,9 @@ body
 	:hover
 		cursor: pointer
 	.arrow
-		font-size: 16px
-		top: 2px
 		left: -15px
 		position: absolute
+		vertical-align: middle
 
 a
 	color: $dark