diff --git a/e2e/components/icon-e2e.spec.ts b/e2e/components/icon-e2e.spec.ts
index 0c17ac1ff1f..f0261f5d2d8 100644
--- a/e2e/components/icon-e2e.spec.ts
+++ b/e2e/components/icon-e2e.spec.ts
@@ -13,7 +13,7 @@ describe('icon', () => {
     it('should have the correct class when used', async () => {
       const attr = await testIcon.getAttribute('class');
 
-      expect(attr).toContain('md-24');
+      expect(attr).toContain('custom-class');
       expect(attr).toContain('material-icons');
     });
 
diff --git a/src/demo-app/a11y/button/button-a11y.html b/src/demo-app/a11y/button/button-a11y.html
index 71c5a7d8a08..fdfd08af2a0 100644
--- a/src/demo-app/a11y/button/button-a11y.html
+++ b/src/demo-app/a11y/button/button-a11y.html
@@ -7,15 +7,15 @@
     <button mat-raised-button (click)="increase()">Pitch</button>
     <button mat-fab (click)="increase()"
             aria-label="Activate floating action style button to increase the button counter">
-      <mat-icon class="md-24">plus_one</mat-icon>
+      <mat-icon>plus_one</mat-icon>
     </button>
     <button mat-mini-fab (click)="increase()"
             aria-label="Mini floating action button to increase the button counter by 1">
-      <mat-icon class="md-24">plus_one</mat-icon>
+      <mat-icon>plus_one</mat-icon>
     </button>
     <button mat-icon-button (click)="increase()"
             aria-label="Icon button to increase the button counter by 1">
-      <mat-icon class="md-24">plus_one</mat-icon>
+      <mat-icon>plus_one</mat-icon>
     </button>
   </section>
 
@@ -25,15 +25,15 @@
     <a href="https://www.youtube.com/" mat-raised-button>YouTube</a>
     <a href="http://www.google.com" mat-fab
        aria-label="Activate floating action style google search link">
-      <mat-icon class="md-24">search</mat-icon>
+      <mat-icon>search</mat-icon>
     </a>
     <a href="http://www.google.com" mat-mini-fab
        aria-label="Activate mini floating action style google search link">
-      <mat-icon class="md-24">search</mat-icon>
+      <mat-icon>search</mat-icon>
     </a>
     <a href="http://www.google.com" mat-icon-button
        aria-label="Activate icon style google search link">
-      <mat-icon class="md-24">search</mat-icon>
+      <mat-icon>search</mat-icon>
     </a>
   </section>
 
diff --git a/src/demo-app/button-toggle/button-toggle-demo.html b/src/demo-app/button-toggle/button-toggle-demo.html
index 3d81775b284..fdb4c24fafa 100644
--- a/src/demo-app/button-toggle/button-toggle-demo.html
+++ b/src/demo-app/button-toggle/button-toggle-demo.html
@@ -22,13 +22,13 @@
 <section class="demo-section">
   <mat-button-toggle-group name="checkbox" [vertical]="isVertical" [disabled]="isDisabled">
     <mat-button-toggle value="bold">
-      <mat-icon class="md-24">format_bold</mat-icon>
+      <mat-icon>format_bold</mat-icon>
     </mat-button-toggle>
     <mat-button-toggle value="italic">
-      <mat-icon class="md-24">format_italic</mat-icon>
+      <mat-icon>format_italic</mat-icon>
     </mat-button-toggle>
     <mat-button-toggle value="underline">
-      <mat-icon class="md-24">format_underline</mat-icon>
+      <mat-icon>format_underline</mat-icon>
     </mat-button-toggle>
   </mat-button-toggle-group>
 </section>
diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
index 38ffdfd83e8..2b3400b1576 100644
--- a/src/demo-app/button/button-demo.html
+++ b/src/demo-app/button/button-demo.html
@@ -3,13 +3,13 @@
     <button mat-button>flat</button>
     <button mat-raised-button>raised</button>
     <button mat-fab>
-      <mat-icon class="md-24">check</mat-icon>
+      <mat-icon>check</mat-icon>
     </button>
     <button mat-fab>Btn</button>
     <a mat-fab routerLink=".">Link</a>
-    <a mat-fab routerLink="."><mat-icon class="md-24">check</mat-icon></a>
+    <a mat-fab routerLink="."><mat-icon>check</mat-icon></a>
     <button mat-mini-fab>
-      <mat-icon class="md-24">check</mat-icon>
+      <mat-icon>check</mat-icon>
     </button>
     <button mat-mini-fab>Btn</button>
     <a mat-mini-fab routerLink=".">Link</a>
@@ -19,10 +19,10 @@
     <a href="http://www.google.com" mat-button color="primary">SEARCH</a>
     <a href="http://www.google.com" mat-raised-button>SEARCH</a>
     <a href="http://www.google.com" mat-fab>
-      <mat-icon class="md-24">check</mat-icon>
+      <mat-icon>check</mat-icon>
     </a>
     <a href="http://www.google.com" mat-mini-fab>
-      <mat-icon class="md-24">check</mat-icon>
+      <mat-icon>check</mat-icon>
     </a>
   </section>
 
@@ -40,27 +40,27 @@
 
   <section>
     <button mat-fab color="primary">
-      <mat-icon class="md-24">home</mat-icon>
+      <mat-icon>home</mat-icon>
     </button>
     <button mat-fab color="accent">
-      <mat-icon class="md-24">favorite</mat-icon>
+      <mat-icon>favorite</mat-icon>
     </button>
     <button mat-fab color="warn">
-      <mat-icon class="md-24">feedback</mat-icon>
+      <mat-icon>feedback</mat-icon>
     </button>
   </section>
 
   <section>
     <button mat-icon-button color="primary">
-      <mat-icon class="md-24">menu</mat-icon>
+      <mat-icon>menu</mat-icon>
     </button>
 
     <button mat-icon-button color="accent">
-      <mat-icon class="md-24">favorite</mat-icon>
+      <mat-icon>favorite</mat-icon>
     </button>
 
     <button mat-icon-button>
-      <mat-icon class="md-24">more_vert</mat-icon>
+      <mat-icon>more_vert</mat-icon>
     </button>
   </section>
 
@@ -79,11 +79,11 @@
     <a href="http://www.google.com" #button2 mat-button color="accent" [disabled]="isDisabled">off</a>
     <button mat-raised-button #button3 color="primary" [disabled]="isDisabled">off</button>
     <button mat-mini-fab [disabled]="isDisabled">
-      <mat-icon class="md-24">check</mat-icon>
+      <mat-icon>check</mat-icon>
     </button>
 
     <button mat-icon-button color="accent" [disabled]="isDisabled">
-      <mat-icon class="md-24">favorite</mat-icon>
+      <mat-icon>favorite</mat-icon>
     </button>
   </section>
   <section>
@@ -97,13 +97,13 @@
   <section>
     <button mat-raised-button>More<mat-icon>more_vert</mat-icon></button>
     <button mat-raised-button>Check<mat-icon>check</mat-icon></button>
-    <button mat-raised-button>Check<mat-icon class="md-24">favorite</mat-icon></button>
+    <button mat-raised-button>Check<mat-icon>favorite</mat-icon></button>
     <button mat-raised-button>Last<mat-icon>navigate_before</mat-icon></button>
   </section>
   <section>
     <button mat-button>More<mat-icon>more_vert</mat-icon></button>
     <button mat-button>Check<mat-icon>check</mat-icon></button>
-    <button mat-button>Check<mat-icon class="md-24">favorite</mat-icon></button>
+    <button mat-button>Check<mat-icon>favorite</mat-icon></button>
     <button mat-button>Last<mat-icon>navigate_before</mat-icon></button>
   </section>
   <section>
diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html
index 496b93d9634..cb6e9d90453 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/demo-app/demo-app/demo-app.html
@@ -25,13 +25,13 @@
   <div>
     <mat-toolbar color="primary">
       <button mat-icon-button (click)="start.open()">
-        <mat-icon class="md-24">menu</mat-icon>
+        <mat-icon>menu</mat-icon>
       </button>
       <div class="demo-toolbar">
         <h1>Angular Material Demos</h1>
         <div>
           <button mat-icon-button (click)="toggleFullscreen()" title="Toggle fullscreen">
-            <mat-icon class="md-24">fullscreen</mat-icon>
+            <mat-icon>fullscreen</mat-icon>
           </button>
           <button mat-button (click)="toggleTheme()">{{dark ? 'Light' : 'Dark'}} theme</button>
           <button mat-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
diff --git a/src/demo-app/screen-type/screen-type-demo.html b/src/demo-app/screen-type/screen-type-demo.html
index 6632da3f6f9..738a872f939 100644
--- a/src/demo-app/screen-type/screen-type-demo.html
+++ b/src/demo-app/screen-type/screen-type-demo.html
@@ -1,29 +1,29 @@
 <h2>Screen Type</h2>
 
-<md-grid-list cols="6" rowHeight="1:2">
-  <md-grid-tile [class.active]="(isHandset | async)?.matches"
+<mat-grid-list cols="6" rowHeight="1:2">
+  <mat-grid-tile [class.active]="(isHandset | async)?.matches"
                 colspan="2">
-    <md-icon>smartphone</md-icon>
+    <mat-icon>smartphone</mat-icon>
     <p>Handset</p>
-  </md-grid-tile>
-  <md-grid-tile [class.active]="(isTablet | async)?.matches"
+  </mat-grid-tile>
+  <mat-grid-tile [class.active]="(isTablet | async)?.matches"
                 colspan="2">
-    <md-icon>tablet_android</md-icon>
+    <mat-icon>tablet_android</mat-icon>
     <p>Tablet</p>
-  </md-grid-tile>
-  <md-grid-tile [class.active]="(isWeb | async)?.matches"
+  </mat-grid-tile>
+  <mat-grid-tile [class.active]="(isWeb | async)?.matches"
                 colspan="2">
-    <md-icon>laptop</md-icon>
+    <mat-icon>laptop</mat-icon>
     <p>Web</p>
-  </md-grid-tile>
-  <md-grid-tile [class.active]="(isPortrait | async)?.matches"
+  </mat-grid-tile>
+  <mat-grid-tile [class.active]="(isPortrait | async)?.matches"
                 colspan="3">
-    <md-icon>stay_current_portrait</md-icon>
+    <mat-icon>stay_current_portrait</mat-icon>
     <p>Portrait</p>
-  </md-grid-tile>
-  <md-grid-tile [class.active]="(isLandscape | async)?.matches"
+  </mat-grid-tile>
+  <mat-grid-tile [class.active]="(isLandscape | async)?.matches"
                 colspan="3">
-    <md-icon>stay_current_landscape</md-icon>
+    <mat-icon>stay_current_landscape</mat-icon>
     <p>Landscape</p>
-  </md-grid-tile>
-</md-grid-list>
+  </mat-grid-tile>
+</mat-grid-list>
diff --git a/src/e2e-app/button/button-e2e.html b/src/e2e-app/button/button-e2e.html
index 74510d8c901..762b3289c9c 100644
--- a/src/e2e-app/button/button-e2e.html
+++ b/src/e2e-app/button/button-e2e.html
@@ -27,10 +27,10 @@
   </button>
 
   <button mat-mini-fab [disabled]="isDisabled" aria-label="Check">
-    <mat-icon class="md-24">check</mat-icon>
+    <mat-icon>check</mat-icon>
   </button>
 
   <button mat-icon-button color="accent" [disabled]="isDisabled" aria-label="Check">
-    <mat-icon class="md-24">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
 </section>
diff --git a/src/e2e-app/icon/icon-e2e.html b/src/e2e-app/icon/icon-e2e.html
index 65a0e62c71e..78e142c11f4 100644
--- a/src/e2e-app/icon/icon-e2e.html
+++ b/src/e2e-app/icon/icon-e2e.html
@@ -1,3 +1,3 @@
 <section>
-  <mat-icon class="md-24" id="test-icon">favorite</mat-icon>
-</section>
\ No newline at end of file
+  <mat-icon class="custom-class" id="test-icon">favorite</mat-icon>
+</section>
diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
index e7238dcb568..ba4080ec729 100644
--- a/src/lib/autocomplete/autocomplete.ts
+++ b/src/lib/autocomplete/autocomplete.ts
@@ -84,7 +84,7 @@ export class MatAutocomplete implements AfterContentInit {
       new EventEmitter<MatAutocompleteSelectedEvent>();
 
   /**
-   * Takes classes set on the host md-autocomplete element and applies them to the panel
+   * Takes classes set on the host mat-autocomplete element and applies them to the panel
    * inside the overlay container to allow for easy styling.
    */
   @Input('class')
diff --git a/src/material-examples/button-types/button-types-example.html b/src/material-examples/button-types/button-types-example.html
index 2e06c96f791..852556d9456 100644
--- a/src/material-examples/button-types/button-types-example.html
+++ b/src/material-examples/button-types/button-types-example.html
@@ -21,19 +21,19 @@
 <h3>Icon Buttons</h3>
 <div class="button-row">
   <button mat-icon-button>
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button color="primary">
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button color="accent">
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button color="warn">
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <button mat-icon-button disabled>
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
 </div>
 
@@ -45,7 +45,7 @@
   <button mat-fab color="warn">Warn</button>
   <button mat-fab disabled>Disabled</button>
   <button mat-fab>
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-fab routerLink=".">Link</a>
 </div>
@@ -58,7 +58,7 @@
   <button mat-mini-fab color="warn">Warn</button>
   <button mat-mini-fab disabled>Disabled</button>
   <button mat-mini-fab>
-    <mat-icon class="md-24" aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
 </div>