From b727c149ec24df096d86c469a1710e5a333d62bd Mon Sep 17 00:00:00 2001
From: Yiran Mao <yiranmao@gmail.com>
Date: Thu, 14 Sep 2017 17:21:17 -0400
Subject: [PATCH] feat(button): Support icon in button (#1281)

---
 demos/button.html                   | 34 ++++++++++++++++++++++++++++-
 packages/mdc-button/README.md       |  3 +--
 packages/mdc-button/_mixins.scss    | 10 +++++++++
 packages/mdc-button/mdc-button.scss |  4 ++++
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/demos/button.html b/demos/button.html
index 713ac9d8a1d..72ae6de4962 100644
--- 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
index 3edf1e09472..5678e0eace6 100644
--- 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
index 786991896ac..1f8209dca4e 100644
--- 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
index db56fe86122..8698af994a3 100644
--- 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