feat(button): Support icon in button (#1281)

material-components · Sep 14, 2017 · b727c14 · b727c14
1 parent 7235135
commit b727c14
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 3 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -20,10 +20,10 @@
     <title>Button - Material Components Catalog</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
-    <script src="/assets/button.css.js"></script>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <script src="/assets/button.css.js"></script>
     <style>
       .demo-wrapper {
         padding-bottom: 100px;
@@ -144,6 +144,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button secondary-text-button">
               Secondary
             </button>
+            <button class="mdc-button">
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button">
               Link
             </a>
@@ -165,6 +169,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--raised secondary-filled-button">
               Secondary
             </button>
+            <button class="mdc-button mdc-button--raised">
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--raised">
               Link
             </a>
@@ -186,6 +194,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--unelevated secondary-filled-button">
               Secondary
             </button>
+            <button class="mdc-button mdc-button--unelevated">
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--unelevated">
               Link
             </a>
@@ -207,6 +219,10 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--stroked secondary-stroked-button">
               Secondary
             </button>
+            <button class="mdc-button mdc-button--stroked">
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
               Link
             </a>
@@ -229,6 +245,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button secondary-text-button" data-demo-no-js>
               Secondary
             </button>
+            <button class="mdc-button" data-demo-no-js>
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
               Link
             </a>
@@ -250,6 +270,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--raised secondary-filled-button" data-demo-no-js>
               Secondary
             </button>
+            <button class="mdc-button mdc-button--raised" data-demo-no-js>
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
               Link
             </a>
@@ -271,6 +295,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--unelevated secondary-filled-button" data-demo-no-js>
               Secondary
             </button>
+            <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Link
             </a>
@@ -292,6 +320,10 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             <button class="mdc-button mdc-button--stroked secondary-stroked-button" data-demo-no-js>
               Secondary
             </button>
+            <button class="mdc-button mdc-button--stroked" data-demo-no-js>
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--stroked" data-demo-no-js>
               Link
             </a>

diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
@@ -57,6 +57,7 @@ semantically correct.
 | Class                 | Description                                             |
 | --------------------- | ------------------------------------------------------- |
 | `mdc-button`          | Mandatory, defaults to a text button that is flush with the surface.|
+| `mdc-button__icon`    | Optional, for the icon element. |
 | `mdc-button--raised`  | Optional, a contained button that is elevated upon the surface.   |
 | `mdc-button--unelevated`  | Optional, a contained button that is flush with the surface.  |
 | `mdc-button--stroked`  | Optional, a contained button that is flush with the surface and has a visible border. |
@@ -117,5 +118,3 @@ container color to the given color, and updates the Button's ink and ripple colo
 | `mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 4px) |
 | `mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px) |
 | `mdc-button-stroke-style` | Sets the stroke style to the given style (defaults to solid line) |
-
-
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -130,6 +130,16 @@
   }
 }
 
+@mixin mdc-button__icon_ {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  font-size: 18px;
+  line-height: inherit;
+  vertical-align: top;
+}
+
 @mixin mdc-button--stroked_() {
   &:disabled {
     @include mdc-theme-prop(border-color, text-disabled-on-light);

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -67,4 +67,8 @@
 .mdc-button--dense {
   @include mdc-button--dense_;
 }
+
+.mdc-button__icon {
+  @include mdc-button__icon_;
+}
 // postcss-bem-linter: end