feat(button): Add support for SVG icons (#2352)

* feat(button): Update * feat(button): Update for comments * feat(button): Update for svg icons * feat(button): Remove img element option * feat(button): Update to use vertical align and class * feat(button): Update for comments * feat(button): Update readme/style * feat(button): Update for comments * feat(button): Update for comments
material-components · Mar 9, 2018 · 499ad15 · 499ad15
1 parent 1065a74
commit 499ad15
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 0 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -122,6 +122,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button">
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button">
               Link
             </a>
@@ -144,6 +151,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button mdc-button--raised">
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--raised">
               Link
             </a>
@@ -166,6 +180,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button mdc-button--unelevated">
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--unelevated">
               Link
             </a>
@@ -188,6 +209,13 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button mdc-button--stroked">
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
               Link
             </a>
@@ -223,6 +251,13 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button" data-demo-no-js>
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button" data-demo-no-js>
               Link
             </a>
@@ -245,6 +280,13 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button mdc-button--raised" data-demo-no-js>
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--raised" data-demo-no-js>
               Link
             </a>
@@ -267,9 +309,17 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG Icon
+            </button>
             <a href="javascript:void(0)" class="mdc-button mdc-button--unelevated" data-demo-no-js>
               Link
             </a>
+            </a>
           </div>
         </fieldset>
 
@@ -289,6 +339,13 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
               <i class="material-icons mdc-button__icon">favorite</i>
               Icon
             </button>
+            <button class="mdc-button mdc-button--stroked" data-demo-no-js>
+              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+                <path fill="none" d="M0 0h24v24H0z"/>
+                <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
+              </svg>
+              SVG 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
@@ -70,6 +70,17 @@ We recommend you load [Material Icons](https://material.io/icons/) from Google F
 </button>
 ```
 
+It's also possible to use an SVG icon:
+
+```html
+<button class="mdc-button">
+  <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
+  ...
+  </svg>
+  SVG Icon
+</button>
+```
+
 ### CSS Classes
 
 

diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss
@@ -131,6 +131,14 @@
   vertical-align: top;
 }
 
+@mixin mdc-button__icon-svg_ {
+  @include mdc-rtl-reflexive-box(margin, right, 8px);
+
+  margin-top: -2px;
+  fill: currentColor;
+  vertical-align: middle;
+}
+
 @mixin mdc-button--stroked_() {
   border-style: solid;
 

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -34,6 +34,11 @@
   .mdc-button__icon {
     @include mdc-button__icon_;
   }
+
+  // stylelint-disable-next-line selector-no-qualifying-type
+  svg.mdc-button__icon {
+    @include mdc-button__icon-svg_;
+  }
 }
 
 .mdc-button--raised,