From 0e83e60cb20f6510334dd1e6a69cb3b790588764 Mon Sep 17 00:00:00 2001
From: Miguel Ortiz <miguelortiz1994@outlook.com>
Date: Thu, 12 Dec 2019 15:16:12 -0500
Subject: [PATCH] Allow to add pack's icons

---
 src/components/TabContent.vue |  7 +++++++
 src/components/WizardStep.vue |  8 ++++++--
 types/TabContent.ts           | 12 +++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index c8b61ae..a66015d 100644
--- a/src/components/TabContent.vue
+++ b/src/components/TabContent.vue
@@ -23,6 +23,13 @@
         type: String,
         default: ''
       },
+      /***
+       * Icon pack name corresponding
+       */
+      iconPack: {
+          default: '',
+          type: String
+      },
       /***
        * Function to execute before tab switch. Return value must be boolean
        * If the return result is false, tab switch is restricted
diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
index d6a11d6..6971053 100644
--- a/src/components/WizardStep.vue
+++ b/src/components/WizardStep.vue
@@ -17,12 +17,16 @@
                  :class="{square_shape:isStepSquare, tab_shape:isTabShape}"
                  :style="[tab.active ? iconActiveStyle: {}, tab.validationError ? errorStyle : {}]">
               <slot name="active-step">
-                <i v-if="tab.icon" :class="tab.icon" class="wizard-icon"></i>
+                <i v-if="tab.icon" :class="[tab.iconPack, tab.iconPack !== 'material-icons' ? tab.icon : '']" class="wizard-icon">
+                  {{ tab.iconPack === 'material-icons' ? icon : '' }}
+                </i>
                 <i v-else class="wizard-icon">{{index + 1}}</i>
               </slot>
             </div>
             <slot v-if="!tab.active">
-              <i v-if="!tab.active && tab.icon" :class="tab.icon" class="wizard-icon"></i>
+              <i v-if="!tab.active && tab.icon" :class="[tab.iconPack, tab.iconPack !== 'material-icons' ? tab.icon : '']" class="wizard-icon">
+                {{ tab.iconPack === 'material-icons' ? icon : '' }}
+              </i>
               <i v-if="!tab.active && !tab.icon" class="wizard-icon">{{index + 1}}</i>
             </slot>
         </transition>
diff --git a/types/TabContent.ts b/types/TabContent.ts
index cbd1ebd..bcc404a 100644
--- a/types/TabContent.ts
+++ b/types/TabContent.ts
@@ -3,17 +3,23 @@ import Vue from 'vue'
 export declare class Tab extends Vue {
   /**
    * Title to be displayed under each step.
-   * 
+   *
    * Default value: ''
    */
   title: string
-  
+
   /** CSS class to be applied to each step icon.
-   * 
+   *
    * Default value: ''
    */
   icon: string
 
+  /** Icon pack name corresponding.
+   *
+   * Default value: ''
+   */
+  iconPack: string
+
   /**
    * Function to execute before changing tabs. If the return result is false, the tab switch is restricted.
    */