feat(button): Add ability to color icons separately from the text (#2362

)
material-components · Mar 19, 2018 · 6e5139c · 6e5139c
1 parent 04b9ea0
commit 6e5139c
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);