fix icon-button docs

chloerei · Mar 24, 2024 · 8a98235 · 8a98235
1 parent d181c2a
commit 8a98235
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,25 +9,25 @@ 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>
   <div class="top-app-bar__title text-align-center">
     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,25 +39,25 @@ 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>
   <div class="top-app-bar__title">
     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,25 +69,25 @@ 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>
   <div class="top-app-bar__title">
     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,25 +99,25 @@ 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>
   <div class="top-app-bar__title">
     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
@@ -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
@@ -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
@@ -32,15 +32,15 @@ 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 %}
 
 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
@@ -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>