feat(button): add style for mdc-icon

stasson · Sep 30, 2017 · 95fcbff · 95fcbff
1 parent f747ac1
commit 95fcbff
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/components/button/README.md b/components/button/README.md
@@ -44,8 +44,6 @@ var vm = new Vue({
 <mdc-button>Baseline</mdc-button>
 <mdc-button compact>Compact</mdc-button>
 <mdc-button dense>Dense</mdc-button>
-<mdc-button primary>Primary</mdc-button>
-<mdc-button accent>Secondary</mdc-button>
 ```
 
 ### Raised Button
@@ -54,8 +52,6 @@ var vm = new Vue({
 <mdc-button raised>Baseline</mdc-button>
 <mdc-button raised compact>Compact</mdc-button>
 <mdc-button raised dense>Dense</mdc-button>
-<mdc-button raised primary>Primary</mdc-button>
-<mdc-button raised accent>Secondary</mdc-button>
 ```
 
 ### Uneleveted buttons
@@ -64,8 +60,12 @@ var vm = new Vue({
 <mdc-button unelevated>Baseline</mdc-button>
 <mdc-button unelevated compact>Compact</mdc-button>
 <mdc-button unelevated dense>Dense</mdc-button>
-<mdc-button unelevated primary>Primary</mdc-button>
-<mdc-button unelevated accent>Secondary</mdc-button>
+```
+
+### Icon buttons
+
+```html
+<mdc-button ><mdc-icon icon="favorite"></mdc-icon>like</mdc-button>
 ```
 
 ### Reference

diff --git a/components/button/mdc-button.scss b/components/button/mdc-button.scss
@@ -1 +1,8 @@
 @import "@material/button/mdc-button";
+
+
+.mdc-button {
+  .mdc-icon {
+    @extend .mdc-button__icon;
+  }
+}
diff --git a/src/Doc.vue b/src/Doc.vue
@@ -41,13 +41,15 @@
             <mdc-button >baseline</mdc-button>
             <mdc-button compact>compact</mdc-button>
             <mdc-button dense>dense</mdc-button>
+            <mdc-button><mdc-icon icon="favorite"></mdc-icon>icon</mdc-button>
             <mdc-button disabled>disabled</mdc-button>
           </div>
           <mdc-subheading>Raised Buttons</mdc-subheading>
           <div class="doc-center">
             <mdc-button raised>baseline</mdc-button>
             <mdc-button raised compact>compact</mdc-button>
             <mdc-button raised dense>dense</mdc-button>
+            <mdc-button raised><mdc-icon icon="favorite"></mdc-icon>icon</mdc-button>
             <mdc-button raised disabled>disabled</mdc-button>
           </div>
 
@@ -56,6 +58,7 @@
             <mdc-button unelevated>baseline</mdc-button>
             <mdc-button unelevated compact>compact</mdc-button>
             <mdc-button unelevated dense>dense</mdc-button>
+            <mdc-button unelevated ><mdc-icon icon="favorite"></mdc-icon>icon</mdc-button>
             <mdc-button unelevated disabled>disabled</mdc-button>
           </div>
 
@@ -64,6 +67,7 @@
             <mdc-button stroked>baseline</mdc-button>
             <mdc-button stroked compact>compact</mdc-button>
             <mdc-button stroked dense>dense</mdc-button>
+            <mdc-button stroked><mdc-icon icon="favorite"></mdc-icon>icon</mdc-button>
             <mdc-button stroked disabled>disabled</mdc-button>
           </div>