Committing to Material icons

src/scss/components/_dropdown-field.scss

@@ -7,13 +7,19 @@
 	position: relative;
 	display: inline-block;
 
-	.label:not(.button) {
-		@include animate();
-		padding: 14px 10px;
-		cursor: pointer;
+	.label {
+		.icon {
+			padding-right: 6px;
+		}
 
-		.notouch &:hover {
-			color: $blue;
+		&:not(.button) {
+			@include animate();
+			padding: 14px 10px;
+			cursor: pointer;
+
+			.notouch &:hover {
+				color: $blue;
+			}
 		}
 	}
 
@@ -107,11 +113,11 @@
 					background: linear-gradient(to bottom right, rgba(255,255,255,1), rgba(0,0,0,0.5));
 				}
 
-				.fa {
+				.icon {
 					position: absolute;
-					top: 11px;
-					left: 8px;
-					font-size: 10px;
+					top: 8px;
+					left: 6px;
+					font-size: 16px;
 				}
 
 				.notouch &:hover {

src/scss/components/_filter-field.scss

@@ -5,9 +5,9 @@
 		position: relative;
 	}
 
-	.fa {
+	.icon {
 		position: absolute;
-		top: 12px;
+		top: 10px;
 		left: 15px;
 		pointer-events: none;
 	}
@@ -25,8 +25,7 @@
 		}
 		
 		&:hover {
-
-			.fa {
+			.icon {
 				color: $blue;
 			}
 		}
@@ -46,8 +45,8 @@
 		display: block;
 		border-bottom: 1px solid lighten($grey, 5%);
 
-		.fa {
-			top: 17px;
+		.icon {
+			top: 15px;
 			left: 24px;
 			color: $white !important;
 		}

src/scss/components/_header.scss

@@ -63,19 +63,15 @@ main {
 			padding: 10px 10px 10px 0;
 			margin-bottom: -10px;
 
-			.icon {
-				margin-bottom: 6px;
-				padding-right: 6px;
-				margin-left: 10px;
-
-				svg {
-					height: 1.2rem;
-				}
-			}
-
 			h1 {
 				vertical-align: top;
 				padding-top: 6px;
+
+				& > .icon {
+					margin-bottom: 2px;
+					padding-right: 6px;
+					margin-left: 10px;
+				}
 			}
 
 			.options {

src/scss/components/_icon.scss

@@ -187,25 +187,28 @@ $icon-websocket: \e920;
 }
 
 .material-icon {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    vertical-align: bottom;
+    font-size: 1.3em;
+    margin-bottom: 0.1em;
 
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
 
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
 
-  /* Support for IE. */
-  font-feature-settings: 'liga';
+    /* Support for IE. */
+    font-feature-settings: 'liga';
 }

src/scss/components/_modal.scss

@@ -33,8 +33,8 @@
 				opacity: 1;
 			}
 
-			.icon svg {
-				height: 35px;
+			.icon {
+				font-size: 35px;
 			}
 		}
 	}

src/scss/components/_playback-controls.scss

@@ -83,7 +83,6 @@
 
 	.control {
 		@include animate();
-		font-size: 14px;
 		color: $white;
 		cursor: pointer;
 		padding: 10px 6px;
@@ -91,6 +90,10 @@
 		vertical-align: bottom;
 		opacity: 0.8;
 
+		.icon {
+			font-size: 0.9em;
+		}
+
 		&.active {
 			color: $turquoise !important;
 		}
@@ -215,17 +218,11 @@
 
 			&.playback {
 				left: 0;
-				width: 60px;
+				width: 70px;
 
 				.control {
 					&.play {
-						margin-bottom: 0;
-
-						.icon {
-							svg {
-								height: 12px;
-							}
-						}
+						margin-bottom: -8px;
 					}
 					&.previous {
 						display: none;