feat(toolbar): add support for custom icons

BREAKING CHANGE:
- mdc-toolbar-menu replaces mdc-toolbar-icon-menu
- use icon prop instead of slot to set the icon

components/icon/README.md

@@ -14,7 +14,7 @@
 
 ### Custom Icons
 
-> You can ommit the icon prop to render your custom icons 
+> do not set the icon prop to render your custom icons 
 
 **Font Awsome**
 

components/icon/mdc-icon.vue

@@ -9,6 +9,6 @@ export default {
   name: 'mdc-icon',
   props: {
     icon: String
-  },
+  }
 }
 </script>

components/toolbar/README.md

@@ -8,7 +8,7 @@
       <mdc-toolbar-title>Title</mdc-toolbar-title>
     </mdc-toolbar-section>
     <mdc-toolbar-section align-end>
-      <mdc-toolbar-icon event="show-help">help</mdc-toolbar-icon>
+      <mdc-toolbar-icon event="show-help" icon="help"></mdc-toolbar-icon>
     </mdc-toolbar-section>
   </mdc-toolbar-row>
 </mdc-toolbar>
@@ -88,11 +88,27 @@ mdc-toolbar.
 
 | props | Type | Default | Description |
 |-------|------|---------|-------------|
+|`icon`|String|          | the material icon name. |
 |`event`|String| optional | optional event to emit on click  |
 |`event-target`|Object| vm.$root | optional event target, defaults to root bus |
 
 > if the `event` property is not specified, use @click to cactch click events
 
+> do not set the icon prop to render your custom icons 
+
+**Font Awsome**
+
+```html
+  <mdc-icon class="fa fa-star"></mdc-icon>
+```
+
+**SVG Icons**
+
+```html
+  <mdc-icon> 
+    <svg ...> 
+  </mdc-icon>
+```
 
 ### Fixed toolbars
 

components/toolbar/index.js

@@ -1,15 +1,15 @@
 import VueMDCToolbar from './mdc-toolbar.vue'
 import VueMDCToolbarRow from './mdc-toolbar-row.vue'
 import VueMDCToolbarSection from './mdc-toolbar-section.vue'
-import VueMDCToolbarTIconMenu from './mdc-toolbar-icon-menu.vue'
+import VueMDCToolbarMenu from './mdc-toolbar-menu.vue'
 import VueMDCToolbarTitle from './mdc-toolbar-title.vue'
 import VueMDCToolbarIcon from './mdc-toolbar-icon.vue'
 
 export {
   VueMDCToolbar,
   VueMDCToolbarRow,
   VueMDCToolbarSection,
-  VueMDCToolbarTIconMenu,
+  VueMDCToolbarMenu,
   VueMDCToolbarTitle,
   VueMDCToolbarIcon
 }
@@ -19,7 +19,7 @@ export default {
     vm.component('mdc-toolbar', VueMDCToolbar)
     vm.component('mdc-toolbar-row', VueMDCToolbarRow)
     vm.component('mdc-toolbar-section', VueMDCToolbarSection)
-    vm.component('mdc-toolbar-icon-menu', VueMDCToolbarTIconMenu)
+    vm.component('mdc-toolbar-menu', VueMDCToolbarMenu)
     vm.component('mdc-toolbar-title', VueMDCToolbarTitle)
     vm.component('mdc-toolbar-icon', VueMDCToolbarIcon)
   }

components/toolbar/mdc-toolbar-icon.vue

@@ -1,8 +1,8 @@
 <template>
-  <a class="material-icons mdc-toolbar__icon"
-    @click="dispatchEvent"
-  >
-    <slot></slot>
+  <a class="mdc-toolbar__icon" 
+    :class="{'material-icons':!!icon}"
+    @click="dispatchEvent">
+    <slot>{{icon}}</slot>
   </a>
 </template>
 
@@ -11,6 +11,9 @@ import {DispatchEventMixin} from '../util'
 
 export default {
   name: 'mdc-toolbar-icon',
-  mixins: [DispatchEventMixin]
+  mixins: [DispatchEventMixin],
+  props: {
+    icon: String
+  }
 }
 </script>

components/toolbar/mdc-toolbar-menu.vue

@@ -0,0 +1,19 @@
+<template>
+  <a class="mdc-toolbar__icon--menu"
+    :class="{'material-icons':!!icon}"
+    @click="dispatchEvent">
+    <slot>{{icon}}</slot>
+  </a>
+</template>
+
+<script lang="babel">
+import {DispatchEventMixin} from '../util'
+
+export default {
+  name: 'mdc-toolbar-menu',
+  mixins: [DispatchEventMixin],
+  props: {
+    icon: {type: String, 'default': "menu"}
+  }
+}
+</script>

components/toolbar/mdc-toolbar.scss

@@ -1 +1,7 @@
 @import "@material/toolbar/mdc-toolbar";
+
+.mdc-toolbar {
+  .mdc-icon {
+    @extend .mdc-toolbar__icon;
+  }
+}

src/Doc.vue

@@ -4,8 +4,7 @@
     <mdc-toolbar waterfall>
       <mdc-toolbar-row>
         <mdc-toolbar-section align-start >
-          <mdc-toolbar-icon-menu event="toggle-drawer">
-          </mdc-toolbar-icon-menu>
+          <mdc-toolbar-menu event="toggle-drawer"></mdc-toolbar-menu>
           <mdc-toolbar-title href="#">Vue MDC Adapter</mdc-toolbar-title>
         </mdc-toolbar-section>
         <mdc-toolbar-section align-end>