Material icons instead of font awesome

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