feat: Use Fluent SVG icons on the dashboard (#3482)

app/javascript/dashboard/components/ui/Label.vue

@@ -1,13 +1,23 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
-    <i v-if="icon" class="label--icon" :class="icon" @click="onClick" />
+    <button v-if="icon" class="label-action--button" @click="onClick">
+      <fluent-icon :icon="icon" size="12" class="label--icon" />
+    </button>
     <span v-if="!href">{{ title }}</span>
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <i v-if="showClose" class="close--icon ion-close" @click="onClick" />
+    <button
+      v-if="showClose"
+      class="label-action--button"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
   </div>
 </template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';
+
 export default {
   props: {
     title: {
@@ -79,6 +89,8 @@ export default {
 @import '~dashboard/assets/scss/variables';
 
 .label {
+  display: inline-flex;
+  align-items: center;
   font-weight: var(--font-weight-medium);
   margin-right: var(--space-smaller);
   margin-bottom: var(--space-smaller);
@@ -89,11 +101,12 @@ export default {
 
   .label--icon {
     cursor: pointer;
+    margin-right: var(--space-smaller);
   }
-  .label--icon,
+
   .close--icon {
-    font-size: var(--font-size-micro);
     cursor: pointer;
+    margin-left: var(--space-smaller);
   }
 
   &.small .label--icon,
@@ -150,4 +163,8 @@ export default {
     }
   }
 }
+
+.label-action--button {
+  margin-bottom: var(--space-minus-micro);
+}
 </style>

app/javascript/dashboard/components/ui/Wizard.vue

@@ -14,7 +14,7 @@
       <h3>
         {{ item.title }}
         <span v-if="isOver(item)" class="completed">
-          <i class="ion-checkmark"></i>
+          <fluent-icon icon="checkmark" />
         </span>
       </h3>
       <span class="step">

app/javascript/dashboard/components/ui/WootButton.vue

@@ -11,6 +11,7 @@
       class="icon"
       :emoji="emoji"
       :icon="icon"
+      :icon-size="iconSize"
     />
     <span v-if="$slots.default" class="button__content"><slot></slot></span>
   </button>
@@ -35,6 +36,10 @@ export default {
       type: String,
       default: '',
     },
+    iconSize: {
+      type: [Number, String],
+      default: 20,
+    },
     emoji: {
       type: String,
       default: '',