From 6e5139cd3b975fb349f044564ea10769ebf40f5f Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Mon, 19 Mar 2018 08:55:51 -0700
Subject: [PATCH] feat(button): Add ability to color icons separately from the
 text (#2362)

---
 demos/button.html                | 28 ++++++++++++++++++++++++++++
 demos/button.scss                | 10 ++++++++++
 packages/mdc-button/README.md    | 11 ++++++-----
 packages/mdc-button/_mixins.scss |  6 ++++++
 4 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/demos/button.html b/demos/button.html
index c15eba4777d..63980e55a00 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -234,6 +234,20 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
           </div>
         </fieldset>
 
+        <fieldset>
+          <legend class="mdc-typography--title">Different Color Icons/Ink</legend>
+          <div>
+            <button class="mdc-button mdc-button--unelevated demo-ink-color">
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Ink Color
+            </button>
+            <button class="mdc-button mdc-button--stroked demo-icon-color">
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon Color
+            </button>
+          </div>
+        </fieldset>
+
         <h1 class="mdc-typography--display2">CSS Only</h1>
         <fieldset>
           <legend class="mdc-typography--title">Text Button</legend>
@@ -363,6 +377,20 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             </button>
           </div>
         </fieldset>
+
+        <fieldset>
+          <legend class="mdc-typography--title">Different Color Icons/Ink</legend>
+          <div>
+            <button class="mdc-button mdc-button--unelevated demo-ink-color" data-demo-no-js>
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Ink Color
+            </button>
+            <button class="mdc-button mdc-button--stroked demo-icon-color" data-demo-no-js>
+              <i class="material-icons mdc-button__icon">favorite</i>
+              Icon Color
+            </button>
+          </div>
+        </fieldset>
       </section>
     </main>
 
diff --git a/demos/button.scss b/demos/button.scss
index dc1990dec54..291c1d322dc 100644
--- a/demos/button.scss
+++ b/demos/button.scss
@@ -44,3 +44,13 @@
 .mdc-button.thick-stroke-button {
   @include mdc-button-stroke-width(4px);
 }
+
+.demo-ink-color {
+  @include mdc-button-icon-color(white);
+  @include mdc-button-ink-color(orange);
+  @include mdc-states(orange);
+}
+
+.demo-icon-color {
+  @include mdc-button-icon-color(orange);
+}
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index bf5225839b2..8b19e48a3fd 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -139,11 +139,12 @@ container color to the given color, and updates the Button's ink and ripple colo
 
 Mixin | Description
 --- | ---
-`mdc-button-container-fill-color` | Sets the container color to the given color
-`mdc-button-ink-color` | Sets the ink color to the given color
-`mdc-button-stroke-color` | Sets the stroke color to the given color
-`mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 2px)
-`mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px)
+`mdc-button-container-fill-color` | Sets the container color to the given color.
+`mdc-button-icon-color` | Sets the icon color to the given color.
+`mdc-button-ink-color` | Sets the ink color to the given color. This affects both text and icon, unless `mdc-button-icon-color` is also used.
+`mdc-button-stroke-color` | Sets the stroke color to the given color.
+`mdc-button-corner-radius` | Sets the corner radius to the given number (defaults to 2px).
+`mdc-button-stroke-width` | Sets the stroke width to the given number (defaults to 2px).
 
 The ripple effect for the Button component is styled using [MDC Ripple](../mdc-ripple) mixins.
 
diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
index f03d131f925..f9ca2d3f4ad 100644
--- a/packages/mdc-button/_mixins.scss
+++ b/packages/mdc-button/_mixins.scss
@@ -50,6 +50,12 @@
   }
 }
 
+@mixin mdc-button-icon-color($color) {
+  &:not(:disabled) .mdc-button__icon {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
 @mixin mdc-button-ink-color($color) {
   &:not(:disabled) {
     @include mdc-theme-prop(color, $color);