fix(icon-toggle): Custom Icons Don't work #150

closes #150

components/fab/README.md

@@ -8,16 +8,16 @@
 
 > refer to [Material Design Icon Font](https://material.io/icons/) for the list of icons 
 
-> FAB can't be disabled 
+> FAB can't be disabled
 
 > add an `href` attribute for link
 
 
 ### events
 
-| event | args | Description |
-|-------|------|-------------|
-|`@click`||emitted on click |
+| event   | args | Description |
+|---------|------|-------------|
+|`@click` |     | emitted on click |
 
 
 ### props
@@ -39,12 +39,12 @@
 
 ### Custom Icons
 
-> You can omit the icon prop to render your custom icons 
-
 **Font Awsome**
 
 ```html
-  <mdc-fab class="fa fa-star"></mdc-fab>
+  <mdc-fab>
+    <mdc-icon class="fa fa-star"></mdc-icon>
+  </mdc-fab>
 ```
 
 
@@ -74,9 +74,8 @@ You might want to keep button behavior and do the navigation programatically:
 
 ```html
 <mdc-button @click="location.href='#'">Home</mdc-button>
-``` 
-
-
+```
 
 ### Reference
+
 - <https://material.io/components/web/catalog/buttons/floating-action-buttons>

components/icon-toggle/README.md

@@ -1,9 +1,28 @@
 ## Usage
 
 ```html
+  <!-- material icons -->
   <mdc-icon-toggle v-model="toggle"
-    toggle-on="favorite" label-on="Remove from favorites"
-    toggle-off="favorite_border" label-off="Add to favorites" >
+    toggle-on="favorite"
+    toggle-off="favorite_border">
+  </mdc-icon-toggle>
+
+  <!-- material icons with label -->
+  <mdc-icon-toggle v-model="toggle"
+    :toggle-on="{icon:'favorite', label: 'Remove from favorites'}"
+    :toggle-off="{icon: 'favorite_border', label: 'Add to favorites'}">
+  </mdc-icon-toggle>
+
+  <!-- font-awesome -->
+  <mdc-icon-toggle primary v-model="toggle"
+    :toggle-on="{cssClass:'fa fa-favorite'}"
+    :toggle-off="{cssClass: 'fa fa-favorite-o'}">
+  </mdc-icon-toggle>
+
+  <!-- font-awesome with label -->
+  <mdc-icon-toggle primary v-model="toggle"
+    :toggle-on="{cssClass:'fa fa-favorite', label: 'Remove from favorites' }"
+    :toggle-off="{cssClass: 'fa fa-favorite-o', label: 'Add to favorites'}">
   </mdc-icon-toggle>
 ```
 
@@ -17,22 +36,32 @@ var vm = new Vue({
 
 > refer to [Material Design Icon Font](https://material.io/icons/) for the list of icons 
 
-
 ### props
 
-| prop | Type | Default | Description |
-|-------|------|---------|-------------|
-|`v-model`|Boolean|| togggle state binding |
-|`disabled`|Boolean|| whether component is disabled |
-|`primary`|Boolean|| set primary theme |
-|`accent`|Boolean|| set accent theme |
-|`toggle-on`|String|| toggled on icon name |
-|`toggle-off`|String|| toggled off icon  name |
-|`label-on`|String|| toggled on aria-label attribute |
-|`label-off`|String||  toggled on aria-label attribute |
-|`class-on`|String|| optional css class when toggled on|
-|`class-off`|String|| optional css class when toggled off |
+| prop       | Type             | Default   | Description |
+|------------|------------------|-----------|-------------|
+|`v-model`   | Boolean          | value     | togggle state binding |
+|`disabled`  | Boolean          | false     | whether component is disabled |
+|`primary`   | Boolean          | false     | set primary theme |
+|`accent`    | Boolean          | false     | set accent theme |
+|`toggle-on` | [String, Object] | undefined | toggle on material icon name or options (*) |
+|`toggle-off`| [String, Object] | undefined | toggle off material icon name or options (*)|
+
+- (*) Material Icons case
 
+| prop  | Type    | Description        |
+|-------|---------|--------------------|
+|`label`| Boolean | label              |
+|`icon` | String  | material icon name |
+
+- (*) Custom Icons case
+
+| prop      | Type    | Description  |
+|-----------|---------|--------------|
+|`label`    | Boolean | label        |
+|`content`  | String  | icon content |
+|`cssClass` | String  | icon class   |
 
 ### Reference
+
 - <https://material.io/components/web/catalog/buttons/icon-toggle-buttons>

components/icon-toggle/demo.vue

@@ -2,13 +2,13 @@
   <div class="mdc-demo mdc-demo--container">
     <div>
       <mdc-icon-toggle v-model="toggle"
-        toggle-on="favorite" label-on="Remove from favorites"
-        toggle-off="favorite_border" label-off="Add to favorites"
+        :toggle-on="{ icon:'favorite', label: 'Remove from favorites'}"
+        :toggle-off="{ icon: 'favorite_border', label: 'Add to favorites'}"
         ></mdc-icon-toggle>
-
       <mdc-icon-toggle primary v-model="toggle"
-        toggle-on="star" toggle-off="star_border"
-      ></mdc-icon-toggle>
+        :toggle-on="{ cssClass:'fa fa-font-awesome'}"
+        :toggle-off="{ cssClass: 'fa fa-fort-awesome'}"
+        ></mdc-icon-toggle>
       <mdc-icon-toggle accent v-model="toggle"
         toggle-on="cloud_done" toggle-off="cloud"
       ></mdc-icon-toggle>
@@ -24,4 +24,8 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
+</style>

components/icon-toggle/mdc-icon-toggle.vue

@@ -1,12 +1,11 @@
 <template>
-<i class="mdc-icon-toggle material-icons" 
-  role="button" aria-pressed="false" 
-  :class="classes" :style="styles"
-  :tabindex="tabIndex"
-  :data-toggle-on='toggleOnData'
-  :data-toggle-off='toggleOffData'>
-  {{text}}
-</i>
+  <span class="mdc-icon-toggle" role="button" aria-pressed="false"
+    :class="classes" :style="styles"
+    :tabindex="tabIndex"
+    :data-toggle-on="toggleOnData"
+    :data-toggle-off="toggleOffData">
+    <i :class="iconClasses" aria-hidden="true">{{text}}</i>
+  </span>
 </template>
 
 <script>
@@ -16,12 +15,8 @@ import {RippleBase} from '../ripple'
 export default {
   name: 'mdc-icon-toggle',
   props: {
-    'toggle-on': String,
-    'toggle-off': String,
-    'label-on': String,
-    'label-off': String,
-    'class-on': String,
-    'class-off': String,
+    toggleOn: [String, Object],
+    toggleOff: [String, Object],
     value: Boolean,
     disabled: Boolean,
     primary: Boolean,
@@ -34,46 +29,72 @@ export default {
         'mdc-icon-toggle--accent': this.accent
       },
       styles: {},
+      iconClasses: {},
       tabIndex: 0,
       text: '',
-      toggleOnData: JSON.stringify({
-        content: this.toggleOn,
-        label: this.labelOn,
-        cssClass: this.classOn
-      }),
-      toggleOffData: JSON.stringify({
-        content: this.toggleOff,
-        label: this.labelOff,
-        cssClass: this.classOff
-      })
     }
   },
   watch: {
-    'value' (value) {
-      this.foundation.toggle(value)
+    value (value) {
+      this.foundation && this.foundation.toggle(value)
+    },
+    disabled (disabled) {
+      this.foundation && this.foundation.setDisabled(disabled)
+    },
+    toggleOnData () {
+     this.foundation && this.foundation.refreshToggleData()
+    },
+    toggleOffData () {
+    this.foundation && this.foundation.refreshToggleData()
+    },
+    primary (value) {
+      this.$set(this.classes, 'mdc-icon-toggle--primary', value)
+    },
+    accent (value) {
+      this.$set(this.classes, 'mdc-icon-toggle--secondary', value)
+    },
+  },
+  computed: {
+    toggleOnData () {
+      let toggle = this.toggleOn
+      return toggle && JSON.stringify((typeof toggle === 'string') ? { 
+        content: toggle, 
+        cssClass: 'material-icons' 
+      } : {
+        content: toggle.icon || toggle.content,
+        label: toggle.label,
+        cssClass: toggle.icon ? 'material-icons' : toggle.cssClass
+      })
+    } ,
+    toggleOffData () {
+      let toggle = this.toggleOff
+      return toggle && JSON.stringify((typeof toggle === 'string') ? { 
+        content: toggle, 
+        cssClass: 'material-icons' 
+      } : {
+        content: toggle.icon || toggle.content,
+        label: toggle.label,
+        cssClass: toggle.icon ? 'material-icons' : toggle.cssClass
+      })
     },
-    'disabled' (disabled) {
-      this.foundation.setDisabled(disabled)
-    }
   },
   mounted () {
     this.foundation = new MDCIconToggleFoundation({
-      addClass: (className) => this.$set(this.classes, className, true),
-      removeClass: (className) => this.$delete(this.classes, className),
+      addClass: (className) => this.$set(this.iconClasses, className, true),
+      removeClass: (className) => this.$delete(this.iconClasses, className),
       registerInteractionHandler: (evt, handler) =>
         this.$el.addEventListener(evt, handler),
       deregisterInteractionHandler: (evt, handler) =>
         this.$el.removeEventListener(evt, handler),
       setText: (text) => { this.text = text },
       getTabIndex: () => this.tabIndex,
       setTabIndex: (tabIndex) => { this.tabIndex = tabIndex },
-      getAttr: (name) => this.$el.getAttribute(name),
+      getAttr: (name, value) => this.$el.getAttribute(name, value),
       setAttr: (name, value) => { this.$el.setAttribute(name, value) },
       rmAttr: (name) => { this.$el.removeAttribute(name) },
       notifyChange: (evtData) => { this.$emit('input', evtData.isOn) }
     })
     this.foundation.init()
-    this.foundation.refreshToggleData()
     this.foundation.toggle(this.value)
     this.foundation.setDisabled(this.disabled)
 

components/icon/README.md

@@ -9,7 +9,7 @@
 ### props
 
 | prop | Type | Description |
-|-------|------|-------------|
+|------|------|-------------|
 |`icon`|String| material-icon content |
 
 ### Custom Icons

components/icon/demo.vue

@@ -5,7 +5,7 @@
           Material Icon <mdc-icon slot="end-detail" icon="home"></mdc-icon>
         </mdc-list-item>
         <mdc-list-item>
-          Awesome Font<mdc-icon slot="end-detail" class="fa fa-home"></mdc-icon>
+          Awesome Font<mdc-icon slot="end-detail" class="fa fa-font-awesome"></mdc-icon>
         </mdc-list-item>
       </mdc-list>
   </div>