diff --git a/site/components/chip.md b/site/components/chip.md
index bf33269..5337cee 100644
--- a/site/components/chip.md
+++ b/site/components/chip.md
@@ -133,7 +133,7 @@ title: Button
     Input chip
   </div>
   <div class="chip__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">close</span>
     </button>
   </div>
@@ -146,7 +146,7 @@ title: Button
     Input chip
   </div>
   <div class="chip__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">close</span>
     </button>
   </div>
@@ -159,7 +159,7 @@ title: Button
     Disabled
   </div>
   <div class="chip__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">close</span>
     </button>
   </div>
@@ -175,7 +175,7 @@ title: Button
     Input chip
   </div>
   <div class="chip__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">close</span>
     </button>
   </div>
@@ -188,7 +188,7 @@ title: Button
     Input chip
   </div>
   <div class="chip__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">close</span>
     </button>
   </div>
@@ -201,7 +201,7 @@ title: Button
     Disabled
   </div>
   <div class="chip__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">close</span>
     </button>
   </div>
diff --git a/site/components/dialog.md b/site/components/dialog.md
index 012a1e2..a059685 100644
--- a/site/components/dialog.md
+++ b/site/components/dialog.md
@@ -82,7 +82,7 @@ title: Dialog
   <div class="dialog__container">
     <div class="top-app-bar display-none@tablet">
       <div class="top-app-bar__action">
-        <button type="button" class="button button--icon">
+        <button type="button" class="icon-button">
           <span class="material-icons">close</span>
         </button>
       </div>
diff --git a/site/components/navigation-drawer.md b/site/components/navigation-drawer.md
index fea6eb5..703f3e5 100644
--- a/site/components/navigation-drawer.md
+++ b/site/components/navigation-drawer.md
@@ -43,7 +43,7 @@ title: Navigation Drawer
   <div class="flex-grow-1">
     <div class="top-app-bar">
       <div class="top-app-bar__action display-none@laptop">
-        <label for="standard-drawer-toggle" class="button button--icon">
+        <label for="standard-drawer-toggle" class="icon-button">
           <span class="material-icons">menu</span>
         </label>
       </div>
@@ -60,7 +60,7 @@ title: Navigation Drawer
 {% example sandbox %}
 <div class="top-app-bar top-app-bar--sticky-top">
   <div class="top-app-bar__action">
-    <label for="modal-drawer-toggle" class="button button--icon">
+    <label for="modal-drawer-toggle" class="icon-button">
       <span class="material-icons">menu</span>
     </label>
   </div>
diff --git a/site/components/navigation-rail.md b/site/components/navigation-rail.md
index f0d6f2f..ff1cd37 100644
--- a/site/components/navigation-rail.md
+++ b/site/components/navigation-rail.md
@@ -7,7 +7,7 @@ title: Navigation rail
 {% example sandbox %}
 <div class="navigation-rail">
   <div class="navigation-rail__container">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">menu</span>
     </button>
     <button type="button" class="button button--floating-action">
diff --git a/site/components/side-sheet.md b/site/components/side-sheet.md
index 0837d56..4d85e96 100644
--- a/site/components/side-sheet.md
+++ b/site/components/side-sheet.md
@@ -14,7 +14,7 @@ title: Sheet
         Title
       </div>
       <div class="top-app-bar__action display-none@laptop">
-        <label for="standard-sheet-toggle" class="button button--icon">
+        <label for="standard-sheet-toggle" class="icon-button">
           <span class="material-icons">info</span>
         </label>
       </div>
@@ -45,7 +45,7 @@ title: Sheet
     Title
   </div>
   <div class="top-app-bar__action">
-    <label for="modal-sheet-toggle" class="button button--icon">
+    <label for="modal-sheet-toggle" class="icon-button">
       <span class="material-icons">info</span>
     </label>
   </div>
diff --git a/site/components/snackbar.md b/site/components/snackbar.md
index fa8aa6e..f1d4638 100644
--- a/site/components/snackbar.md
+++ b/site/components/snackbar.md
@@ -14,7 +14,7 @@ title: Snackbar
       <button type="button" class="button button--text">Retry</button>
     </div>
     <div class="padding-1">
-      <button type="button" class="button button--icon">
+      <button type="button" class="icon-button">
         <span class="material-icons">close</span>
       </button>
     </div>
diff --git a/site/components/top-app-bar.md b/site/components/top-app-bar.md
index 059d0eb..491c95d 100644
--- a/site/components/top-app-bar.md
+++ b/site/components/top-app-bar.md
@@ -9,7 +9,7 @@ title: App Bar
 {% example %}
 <div class="top-app-bar">
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">menu</span>
     </button>
   </div>
@@ -17,17 +17,17 @@ title: App Bar
     Title
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">search</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">notifications</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">account_circle</span>
     </button>
   </div>
@@ -39,7 +39,7 @@ title: App Bar
 {% example %}
 <div class="top-app-bar">
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">arrow_back</span>
     </button>
   </div>
@@ -47,17 +47,17 @@ title: App Bar
     Title
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">search</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">notifications</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">account_circle</span>
     </button>
   </div>
@@ -69,7 +69,7 @@ title: App Bar
 {% example %}
 <div class="top-app-bar top-app-bar--medium">
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">arrow_back</span>
     </button>
   </div>
@@ -77,17 +77,17 @@ title: App Bar
     Title
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">search</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">notifications</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">account_circle</span>
     </button>
   </div>
@@ -99,7 +99,7 @@ title: App Bar
 {% example %}
 <div class="top-app-bar top-app-bar--large">
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">arrow_back</span>
     </button>
   </div>
@@ -107,17 +107,17 @@ title: App Bar
     Title
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">search</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">notifications</span>
     </button>
   </div>
   <div class="top-app-bar__action">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">account_circle</span>
     </button>
   </div>
diff --git a/site/examples/dashboard.ejs b/site/examples/dashboard.ejs
index a849b4d..71d7151 100644
--- a/site/examples/dashboard.ejs
+++ b/site/examples/dashboard.ejs
@@ -5,7 +5,7 @@ title: Posts
 
 <div class="top-app-bar top-app-bar--sticky-top">
   <div class="top-app-bar__action display-none@laptop">
-    <button type="button" class="button button--icon">
+    <button type="button" class="icon-button">
       <span class="material-icons">menu</span>
     </button>
   </div>
diff --git a/site/examples/dashboard/new.ejs b/site/examples/dashboard/new.ejs
index 6915790..43bea74 100644
--- a/site/examples/dashboard/new.ejs
+++ b/site/examples/dashboard/new.ejs
@@ -5,7 +5,7 @@ title: New Post
 
 <div class="top-app-bar top-app-bar--sticky-top">
   <div class="top-app-bar__action">
-    <a href="../dashboard.html" class="button button--icon">
+    <a href="../dashboard.html" class="icon-button">
       <span class="material-icons">arrow_back</span>
     </a>
   </div>
diff --git a/site/introduction.md b/site/introduction.md
index 8ff0919..5486174 100644
--- a/site/introduction.md
+++ b/site/introduction.md
@@ -32,7 +32,7 @@ You can learn more about BEM rules from here: http://getbem.com/ .
 Material UI works well with [Material Icons](https://fonts.google.com/icons?selected=Material+Icons):
 
 {% example %}
-<button type="button" class="button button--icon">
+<button type="button" class="icon-button">
   <span class="material-icons">edit</span>
 </button>
 {% endexample %}
@@ -40,7 +40,7 @@ Material UI works well with [Material Icons](https://fonts.google.com/icons?sele
 Or use svg format icon:
 
 {% example %}
-<button type="button" class="button button--icon">
+<button type="button" class="icon-button">
   <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
 </button>
 {% endexample %}
diff --git a/themes/docs/layout/index.ejs b/themes/docs/layout/index.ejs
index bf96b6d..b6e469d 100644
--- a/themes/docs/layout/index.ejs
+++ b/themes/docs/layout/index.ejs
@@ -71,7 +71,7 @@
       <div class="flex-grow-1 min-width-0">
         <div class="top-app-bar top-app-bar--sticky-top display-none@tablet">
           <div class="top-app-bar__action">
-            <label for="drawer-toggle" class="button button--icon">
+            <label for="drawer-toggle" class="icon-button">
               <span class="material-icons">menu</span>
             </label>
           </div>