From d975a18cb79b29d2e212c422b45305fac12fa957 Mon Sep 17 00:00:00 2001
From: Sebastien Tasson <sebastien.tasson@gmail.com>
Date: Sat, 30 Sep 2017 14:20:08 +0000
Subject: [PATCH] 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                    |  2 +-
 components/icon/mdc-icon.vue                 |  2 +-
 components/toolbar/README.md                 | 18 +++++++++++++++++-
 components/toolbar/index.js                  |  6 +++---
 components/toolbar/mdc-toolbar-icon-menu.vue | 16 ----------------
 components/toolbar/mdc-toolbar-icon.vue      | 13 ++++++++-----
 components/toolbar/mdc-toolbar-menu.vue      | 19 +++++++++++++++++++
 components/toolbar/mdc-toolbar.scss          |  6 ++++++
 src/Doc.vue                                  |  3 +--
 9 files changed, 56 insertions(+), 29 deletions(-)
 delete mode 100644 components/toolbar/mdc-toolbar-icon-menu.vue
 create mode 100644 components/toolbar/mdc-toolbar-menu.vue

diff --git a/components/icon/README.md b/components/icon/README.md
index cf9978f5..b84fd612 100644
--- a/components/icon/README.md
+++ b/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**
 
diff --git a/components/icon/mdc-icon.vue b/components/icon/mdc-icon.vue
index 7bc17cdb..51e3dde3 100644
--- a/components/icon/mdc-icon.vue
+++ b/components/icon/mdc-icon.vue
@@ -9,6 +9,6 @@ export default {
   name: 'mdc-icon',
   props: {
     icon: String
-  },
+  }
 }
 </script>
diff --git a/components/toolbar/README.md b/components/toolbar/README.md
index d8908bc6..bbbeade4 100644
--- a/components/toolbar/README.md
+++ b/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
 
diff --git a/components/toolbar/index.js b/components/toolbar/index.js
index 320dc219..1ad0f150 100644
--- a/components/toolbar/index.js
+++ b/components/toolbar/index.js
@@ -1,7 +1,7 @@
 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'
 
@@ -9,7 +9,7 @@ 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)
   }
diff --git a/components/toolbar/mdc-toolbar-icon-menu.vue b/components/toolbar/mdc-toolbar-icon-menu.vue
deleted file mode 100644
index ace16066..00000000
--- a/components/toolbar/mdc-toolbar-icon-menu.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <a class="material-icons mdc-toolbar__icon--menu"
-    @click="dispatchEvent"
-  >
-    <slot>menu</slot>
-  </a>
-</template>
-
-<script lang="babel">
-import {DispatchEventMixin} from '../util'
-
-export default {
-  name: 'mdc-toolbar-icon-menu',
-  mixins: [DispatchEventMixin]
-}
-</script>
diff --git a/components/toolbar/mdc-toolbar-icon.vue b/components/toolbar/mdc-toolbar-icon.vue
index 3a85eeae..2e87ec94 100644
--- a/components/toolbar/mdc-toolbar-icon.vue
+++ b/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>
diff --git a/components/toolbar/mdc-toolbar-menu.vue b/components/toolbar/mdc-toolbar-menu.vue
new file mode 100644
index 00000000..1fe9ca38
--- /dev/null
+++ b/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>
diff --git a/components/toolbar/mdc-toolbar.scss b/components/toolbar/mdc-toolbar.scss
index a45d3958..b7b3e6dd 100644
--- a/components/toolbar/mdc-toolbar.scss
+++ b/components/toolbar/mdc-toolbar.scss
@@ -1 +1,7 @@
 @import "@material/toolbar/mdc-toolbar";
+
+.mdc-toolbar {
+  .mdc-icon {
+    @extend .mdc-toolbar__icon;
+  }
+}
\ No newline at end of file
diff --git a/src/Doc.vue b/src/Doc.vue
index f7000cd5..87068a7f 100644
--- a/src/Doc.vue
+++ b/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>