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

app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue

@@ -4,7 +4,7 @@
     :class="{ 'border-left': showAvatar }"
   >
     <span v-if="showAvatar" class="close-button" @click="onClose">
-      <i class="ion-android-close close-icon" />
+      <fluent-icon icon="dismiss" class="close-icon" />
     </span>
     <contact-info
       :show-avatar="showAvatar"

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue

@@ -34,6 +34,7 @@ import Spinner from 'shared/components/Spinner.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import timeMixin from 'dashboard/mixins/time';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 export default {
   components: {
@@ -228,7 +229,7 @@ export default {
                         rel="noopener noreferrer nofollow"
                         href={`https://${profile}.com/${profiles[profile]}`}
                       >
-                        <i class={`ion-social-${profile}`} />
+                        <FluentIcon icon={`brand-${profile}`} />
                       </a>
                     )
                 )}

app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="right-aligned-wrap">
         <div class="search-wrap">
-          <i class="ion-ios-search-strong search-icon" />
+          <fluent-icon icon="search" class="search-icon" />
           <input
             type="text"
             :placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
@@ -28,7 +28,7 @@
 
         <woot-button
           color-scheme="success"
-          icon="ion-android-add-circle"
+          icon="add-circle"
           class="margin-right-small"
           data-testid="create-new-contact"
           @click="onToggleCreate"
@@ -38,7 +38,7 @@
 
         <woot-button
           color-scheme="info"
-          icon="ion-android-upload"
+          icon="cloud-backup"
           @click="onToggleImport"
         >
           {{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}

app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue

@@ -25,7 +25,7 @@
           <woot-button
             variant="smooth"
             size="small"
-            icon="ion-compose"
+            icon="edit"
             color-scheme="secondary"
             class="action-button"
             @click="onEdit"

app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="medium-3 bg-white contact--panel">
-    <span class="close-button" @click="onPanelToggle">
-      <i class="ion-chevron-right" />
-    </span>
+    <woot-button
+      icon="chevron-right"
+      class="close-button clear secondary"
+      @click="onPanelToggle"
+    />
     <contact-info :contact="contact" :channel-type="channelType" />
     <draggable
       :list="conversationSidebarItems"
@@ -254,7 +256,7 @@ export default {
 .close-button {
   position: absolute;
   right: $space-two;
-  top: $space-slab + $space-two;
+  top: $space-slab;
   font-size: $font-size-default;
   color: $color-heading;
   z-index: 9989;

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -8,7 +8,8 @@
         <template v-slot:button>
           <woot-button
             v-if="showSelfAssign"
-            icon="ion-arrow-right-c"
+            icon="arrow-right"
+            icon-size="14"
             variant="link"
             size="small"
             @click="onSelfAssign"

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -18,7 +18,7 @@
             rel="noopener nofollow noreferrer"
           >
             {{ contact.name }}
-            <i class="ion-android-open open-link--icon" />
+            <fluent-icon size="16" icon="open" class="open-link--icon" />
           </a>
         </h3>
         <p v-if="additionalAttributes.description" class="contact--bio">
@@ -29,7 +29,7 @@
           <contact-info-row
             :href="contact.email ? `mailto:${contact.email}` : ''"
             :value="contact.email"
-            icon="ion-email"
+            icon="mail"
             emoji="✉️"
             :title="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
             show-copy
@@ -37,20 +37,20 @@
           <contact-info-row
             :href="contact.phone_number ? `tel:${contact.phone_number}` : ''"
             :value="contact.phone_number"
-            icon="ion-ios-telephone"
+            icon="call"
             emoji="📞"
             :title="$t('CONTACT_PANEL.PHONE_NUMBER')"
           />
           <contact-info-row
             :value="additionalAttributes.company_name"
-            icon="ion-briefcase"
+            icon="building-bank"
             emoji="🏢"
             :title="$t('CONTACT_PANEL.COMPANY')"
           />
           <contact-info-row
             v-if="location || additionalAttributes.location"
             :value="location || additionalAttributes.location"
-            icon="ion-map"
+            icon="map"
             emoji="🌍"
             :title="$t('CONTACT_PANEL.LOCATION')"
           />
@@ -62,7 +62,8 @@
           v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
           title="$t('CONTACT_PANEL.NEW_MESSAGE')"
           class="new-message"
-          icon="ion-chatboxes"
+          icon="chat"
+          icon-size="14"
           size="small expanded"
           @click="toggleConversationModal"
         />
@@ -70,7 +71,8 @@
           v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
           title="$t('EDIT_CONTACT.BUTTON_LABEL')"
           class="edit-contact"
-          icon="ion-edit"
+          icon="edit"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           @click="toggleEditModal"
@@ -80,7 +82,8 @@
           v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
           title="$t('CONTACT_PANEL.MERGE_CONTACT')"
           class="merge-contact"
-          icon="ion-merge"
+          icon="merge"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           color-scheme="secondary"
@@ -92,7 +95,8 @@
           v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
           title="$t('DELETE_CONTACT.BUTTON_LABEL')"
           class="delete-contact"
-          icon="ion-trash-a"
+          icon="delete"
+          icon-size="14"
           variant="smooth"
           size="small expanded"
           color-scheme="alert"
@@ -139,6 +143,7 @@ import { mixin as clickaway } from 'vue-clickaway';
 import ContactInfoRow from './ContactInfoRow';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import SocialIcons from './SocialIcons';
+
 import EditContact from './EditContact';
 import NewConversation from './NewConversation';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal';

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="contact-info--row">
     <a v-if="href" :href="href" class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" />
+      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
       <span v-if="value" class="text-truncate" :title="value">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
@@ -12,14 +12,15 @@
         type="submit"
         variant="link"
         color-scheme="secondary"
-        icon="ion-clipboard"
+        icon="clipboard"
+        icon-size="14"
         class-names="icon copy-icon"
         @click="onCopy"
       />
     </a>
 
     <div v-else class="contact-info--details">
-      <emoji-or-icon :icon="icon" :emoji="emoji" />
+      <emoji-or-icon :icon="icon" :emoji="emoji" icon-size="14" />
       <span v-if="value" class="text-truncate">{{ value }}</span>
       <span v-else class="text-muted">{{
         $t('CONTACT_PANEL.NOT_AVAILABLE')
@@ -70,6 +71,8 @@ export default {
 </script>
 <style scoped lang="scss">
 .contact-info--row {
+  margin-left: var(--space-minus-smaller);
+
   .contact-info--icon {
     font-size: var(--font-size-default);
     min-width: var(--space-medium);

app/javascript/dashboard/routes/dashboard/conversation/contact/SocialIcons.vue

@@ -8,7 +8,7 @@
       rel="noopener noreferrer nofollow"
       class="contact--social-icon"
     >
-      <i :class="`ion-social-${profile.icon}`" />
+      <fluent-icon :icon="`brand-${profile.key}`" size="16" />
     </a>
   </div>
 </template>
@@ -43,10 +43,10 @@ export default {
 
 <style scoped lang="scss">
 .social--icons {
-  margin-bottom: var(--space-small);
+  margin: var(--space-small) 0 var(--space-smaller);
 }
+
 .contact--social-icon {
-  font-size: var(--font-size-medium);
   padding-right: var(--space-slab);
   color: var(--color-body);
 }

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeDropDown.vue

@@ -28,7 +28,7 @@
         </div>
         <woot-button
           class="add"
-          icon="ion-plus-round"
+          icon="add"
           size="tiny"
           @click="addNewAttribute"
         >

app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributeSelector.vue

@@ -8,7 +8,7 @@
       <woot-button
         size="small"
         variant="link"
-        icon="ion-plus"
+        icon="add"
         @click="toggleAttributeDropDown"
       >
         {{ $t('CUSTOM_ATTRIBUTES.ADD_BUTTON_TEXT') }}

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -3,7 +3,7 @@
     <div class="search" :class="{ 'is-active': showSearchBox }">
       <woot-sidemenu-icon />
       <div class="icon">
-        <i class="ion-ios-search-strong search--icon" />
+        <fluent-icon icon="search" class="search--icon" size="28" />
       </div>
       <input
         v-model="searchTerm"

app/javascript/dashboard/routes/dashboard/conversation/search/ResultItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="search-result" @click="onClick">
     <div class="result-header">
-      <div class="message">
-        <i class="ion-ios-chatboxes-outline" />
+      <div class="conversation--block">
+        <fluent-icon icon="chat" class="icon--conversation-search-item" />
         <div class="conversation">
           <div class="user-wrap">
             <div class="name-wrap">
@@ -128,20 +128,20 @@ export default {
     .timestamp {
       color: var(--white);
     }
-    .ion-ios-chatboxes-outline {
+    .icon--conversation-search-item {
       color: var(--white);
     }
   }
 }
 
-.message {
+.conversation--block {
+  align-items: center;
   display: flex;
 }
 
-.ion-ios-chatboxes-outline {
+.icon--conversation-search-item {
   align-items: center;
   display: flex;
-  font-size: var(--font-size-large);
   color: var(--w-500);
 }
 

app/javascript/dashboard/routes/dashboard/conversation/search/SearchMessageItem.vue

@@ -5,7 +5,11 @@
         <div class="name-wrap">
           <span class="text-block-title">{{ userName }}</span>
           <div>
-            <i v-if="isOutgoingMessage" class="ion-headphone" />
+            <fluent-icon
+              v-if="isOutgoingMessage"
+              icon="arrow-reply"
+              class="icon-outgoing"
+            />
           </div>
         </div>
         <span class="timestamp">{{ readableTime }} </span>
@@ -84,7 +88,7 @@ export default {
       color: var(--white);
       text-decoration: underline;
     }
-    .ion-headphone {
+    .icon-outgoing {
       color: var(--white);
     }
   }
@@ -119,9 +123,8 @@ export default {
   }
 }
 
-.ion-headphone {
+.icon-outgoing {
   color: var(--w-500);
-  font-size: var(--font-size-mini);
   padding: var(--space-micro);
   padding-right: var(--space-smaller);
 }

app/javascript/dashboard/routes/dashboard/notifications/routes.js

@@ -9,7 +9,7 @@ export const routes = [
     component: SettingsWrapper,
     props: {
       headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
-      icon: 'ion-ios-bell',
+      icon: 'alert',
       showNewButton: false,
     },
     children: [

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -7,7 +7,7 @@
         :button-label="backButtonLabel"
         :back-url="backUrl"
       />
-      <i v-if="icon" :class="iconClass"></i>
+      <fluent-icon v-if="icon" :icon="icon" :class="iconClass" />
       <slot></slot>
       <span>{{ headerTitle }}</span>
     </h1>
@@ -16,7 +16,7 @@
       :to="buttonRoute"
       class="button success button--fixed-right-top"
     >
-      <i class="icon ion-android-add-circle"></i>
+      <fluent-icon icon="add-circle" />
       <span class="button__content">
         {{ buttonText }}
       </span>

app/javascript/dashboard/routes/dashboard/settings/account/account.routes.js

@@ -10,7 +10,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'ion-gear-a',
+        icon: 'settings',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue

@@ -45,7 +45,7 @@
           </div>
           <div class="medium-6 columns text-right">
             <woot-button
-              icon="ion-locked"
+              icon="lock-closed"
               variant="clear"
               @click.prevent="resetPassword"
             >

app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('AGENT_MGMT.HEADER_BTN_TXT') }}
@@ -59,7 +59,7 @@
                       v-if="showEditAction(agent)"
                       variant="link"
                       color-scheme="secondary"
-                      icon="ion-edit"
+                      icon="edit"
                       class-names="grey-btn"
                       @click="openEditPopup(agent)"
                     >
@@ -69,7 +69,7 @@
                       v-if="showDeleteAction(agent)"
                       variant="link"
                       color-scheme="secondary"
-                      icon="ion-close-circled"
+                      icon="dismiss-circle"
                       class-names="grey-btn"
                       :is-loading="loading[agent.id]"
                       @click="openDeletePopup(agent, index)"

app/javascript/dashboard/routes/dashboard/settings/agents/agent.routes.js

@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_MGMT.HEADER',
-        icon: 'ion-person-stalker',
+        icon: 'people',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -53,7 +53,7 @@
                   variant="link"
                   color-scheme="secondary"
                   class-names="grey-btn"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(attribute)"
                 >
                   {{ $t('ATTRIBUTES_MGMT.LIST.BUTTONS.EDIT') }}
@@ -61,7 +61,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   @click="openDelete(attribute)"
                 >

app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('ATTRIBUTES_MGMT.HEADER_BTN_TXT') }}

app/javascript/dashboard/routes/dashboard/settings/attributes/attributes.routes.js

@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'ATTRIBUTES_MGMT.HEADER',
-        icon: 'ion-code',
+        icon: 'code',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
     >
       {{ $t('AUTOMATION.HEADER_BTN_TXT') }}
     </woot-button>

app/javascript/dashboard/routes/dashboard/settings/automation/automation.routes.js

@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AUTOMATION.HEADER',
-        icon: 'ion-wrench',
+        icon: 'autocorrect',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue

@@ -24,9 +24,9 @@ import EmptyState from 'dashboard/components/widgets/EmptyState.vue';
 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName';
-import InboxIconWithName from 'dashboard/components/widgets/InboxIconWithName';
 import campaignMixin from 'shared/mixins/campaignMixin';
 import timeMixin from 'dashboard/mixins/time';
+import InboxName from 'dashboard/components/widgets/InboxName';
 
 export default {
   components: {
@@ -131,7 +131,7 @@ export default {
           title: this.$t('CAMPAIGN.LIST.TABLE_HEADER.INBOX'),
           align: 'left',
           renderBodyCell: ({ row }) => {
-            return <InboxIconWithName inbox={row.inbox} />;
+            return <InboxName inbox={row.inbox} />;
           },
         },
       ];
@@ -195,7 +195,7 @@ export default {
               <div class="button-wrapper">
                 <WootButton
                   variant="clear"
-                  icon="ion-edit"
+                  icon="edit"
                   color-scheme="secondary"
                   classNames="grey-btn"
                   onClick={() => this.$emit('on-edit-click', row)}
@@ -204,7 +204,7 @@ export default {
                 </WootButton>
                 <WootButton
                   variant="link"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   color-scheme="secondary"
                   onClick={() => this.$emit('on-delete-click', row)}
                 >
@@ -247,7 +247,7 @@ export default {
             <div class="button-wrapper">
               <WootButton
                 variant="link"
-                icon="ion-close-circled"
+                icon="dismiss-circle"
                 color-scheme="secondary"
                 onClick={() => this.$emit('on-delete-click', row)}
               >

app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup"
     >
       {{ buttonText }}

app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js

@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CAMPAIGN.ONGOING.HEADER',
-        icon: 'ion-arrow-swap',
+        icon: 'arrow-swap',
       },
       children: [
         {
@@ -29,7 +29,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CAMPAIGN.ONE_OFF.HEADER',
-        icon: 'ion-radio-waves',
+        icon: 'sound-source',
       },
       children: [
         {

app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('CANNED_MGMT.HEADER_BTN_TXT') }}
@@ -52,7 +52,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-edit"
+                  icon="edit"
                   class-names="grey-btn"
                   @click="openEditPopup(cannedItem)"
                 >
@@ -61,7 +61,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[cannedItem.id]"
                   @click="openDeletePopup(cannedItem, index)"

app/javascript/dashboard/routes/dashboard/settings/canned/canned.routes.js

@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CANNED_MGMT.HEADER',
-        icon: 'ion-chatbox-working',
+        icon: 'chat-multiple',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/inbox/Index.vue

@@ -68,7 +68,7 @@
                   >
                     <woot-button
                       v-if="isAdmin"
-                      icon="ion-gear-b"
+                      icon="settings"
                       variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
@@ -83,7 +83,7 @@
                     color-scheme="secondary"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
-                    icon="ion-close-circled"
+                    icon="dismiss-circle"
                     @click="openDelete(item)"
                   >
                     {{ $t('INBOX_MGMT.DELETE.BUTTON_TEXT') }}

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twitter.vue

@@ -3,7 +3,7 @@
     <div class="login-init full-height text-center">
       <form @submit.prevent="requestAuthorization">
         <woot-submit-button
-          icon-class="ion-social-twitter"
+          icon="brand-twitter"
           button-text="Sign in with Twitter"
           type="submit"
           :loading="isRequestingAuthorization"

app/javascript/dashboard/routes/dashboard/settings/inbox/components/BusinessDay.vue

@@ -24,7 +24,7 @@
           :allow-empty="false"
         />
         <div class="separator-icon">
-          <i class="ion-minus-round" />
+          <fluent-icon icon="subtract" type="solid" size="16" />
         </div>
         <multiselect
           v-model="toTime"

app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js

@@ -19,7 +19,7 @@ export default {
         return {
           headerTitle: 'INBOX_MGMT.HEADER',
           headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
-          icon: 'ion-archive',
+          icon: 'mail-inbox-all',
           newButtonRoutes: ['settings_inbox_list'],
           showBackButton,
         };

app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationHooks.vue

@@ -4,7 +4,7 @@
       v-if="showAddButton"
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddHookModal"
     >
       {{ $t('INTEGRATION_APPS.ADD_BUTTON') }}

app/javascript/dashboard/routes/dashboard/settings/integrationapps/IntegrationItem.vue

@@ -27,7 +27,7 @@
           )
         "
       >
-        <woot-button icon="ion-gear-b">
+        <woot-button icon="settings">
           {{ $t('INTEGRATION_APPS.CONFIGURE') }}
         </woot-button>
       </router-link>

app/javascript/dashboard/routes/dashboard/settings/integrationapps/MultipleIntegrationHooks.vue

@@ -26,7 +26,7 @@
               <woot-button
                 variant="link"
                 color-scheme="secondary"
-                icon="ion-close-circled"
+                icon="dismiss-circle"
                 class-names="grey-btn"
                 @click="$emit('delete', hook)"
               >

app/javascript/dashboard/routes/dashboard/settings/integrationapps/integrations.routes.js

@@ -16,7 +16,7 @@ export default {
             : '';
         return {
           headerTitle: 'INTEGRATION_APPS.HEADER',
-          icon: 'ion-asterisk',
+          icon: 'star-emphasis',
           showBackButton,
           backUrl,
         };

app/javascript/dashboard/routes/dashboard/settings/integrations/Integration.vue

@@ -31,7 +31,7 @@
                 :button-text="
                   $t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
                 "
-                icon-class="ion-close-circled"
+                icon-class="dismiss-circle"
                 button-class="nice alert"
               />
             </div>

app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup()"
     >
       {{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
@@ -45,14 +45,14 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(webHookItem)"
                 >
                   {{ $t('INTEGRATION_SETTINGS.WEBHOOK.EDIT.BUTTON_TEXT') }}
                 </woot-button>
                 <woot-button
                   variant="link"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   color-scheme="secondary"
                   @click="openDeletePopup(webHookItem, index)"
                 >

app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js

@@ -17,7 +17,7 @@ export default {
             : '';
         return {
           headerTitle: 'INTEGRATION_SETTINGS.HEADER',
-          icon: 'ion-flash',
+          icon: 'flash-on',
           showBackButton,
           backUrl,
         };

app/javascript/dashboard/routes/dashboard/settings/labels/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-add-circle"
+      icon="add-circle"
       @click="openAddPopup"
     >
       {{ $t('LABEL_MGMT.HEADER_BTN_TXT') }}
@@ -48,7 +48,7 @@
                   color-scheme="secondary"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
-                  icon="ion-edit"
+                  icon="edit"
                   @click="openEditPopup(label)"
                 >
                   {{ $t('LABEL_MGMT.FORM.EDIT') }}
@@ -56,7 +56,7 @@
                 <woot-button
                   variant="link"
                   color-scheme="secondary"
-                  icon="ion-close-circled"
+                  icon="dismiss-circle"
                   class-names="grey-btn"
                   :is-loading="loading[label.id]"
                   @click="openDeletePopup(label, index)"

app/javascript/dashboard/routes/dashboard/settings/labels/labels.routes.js

@@ -9,7 +9,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_MGMT.HEADER',
-        icon: 'ion-pricetags',
+        icon: 'tag',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/profile/profile.routes.js

@@ -11,7 +11,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'GENERAL_SETTINGS.TITLE',
-        icon: 'ion-compose',
+        icon: 'edit',
         showNewButton: false,
       },
       children: [

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-download"
+      icon="arrow-download"
       @click="downloadAgentReports"
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
@@ -116,7 +116,10 @@ export default {
     },
     downloadAgentReports() {
       const { from, to } = this;
-      const fileName = `agent-report-${format(fromUnixTime(to), 'dd-MM-yyyy')}.csv`;
+      const fileName = `agent-report-${format(
+        fromUnixTime(to),
+        'dd-MM-yyyy'
+      )}.csv`;
       this.$store.dispatch('downloadAgentReports', { from, to, fileName });
     },
     changeSelection(index) {

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue

@@ -2,7 +2,12 @@
   <div class="medium-2 small-6 csat--metric-card">
     <h3 class="heading">
       <span>{{ label }}</span>
-      <i v-tooltip="infoText" class="csat--icon ion-ios-information" />
+      <fluent-icon
+        v-tooltip="infoText"
+        size="14"
+        icon="info"
+        class="csat--icon"
+      />
     </h3>
     <h4 class="metric">
       {{ value }}
@@ -34,7 +39,9 @@ export default {
     var(--space-two);
 
   .heading {
+    align-items: center;
     color: var(--color-heading);
+    display: flex;
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-bold);
     margin: 0;

app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue

@@ -3,7 +3,7 @@
     <woot-button
       color-scheme="success"
       class-names="button--fixed-right-top"
-      icon="ion-android-download"
+      icon="arrow-download"
       @click="downloadReports"
     >
       {{ downloadButtonLabel }}

app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js

@@ -14,7 +14,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'REPORT.HEADER',
-        icon: 'ion-arrow-graph-up-right',
+        icon: 'arrow-trending-lines',
         keepAlive: false,
       },
       children: [
@@ -35,7 +35,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'CSAT_REPORTS.HEADER',
-        icon: 'ion-happy-outline',
+        icon: 'emoji',
         keepAlive: false,
       },
       children: [
@@ -52,7 +52,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'AGENT_REPORTS.HEADER',
-        icon: 'ion-ios-people',
+        icon: 'people',
         keepAlive: false,
       },
       children: [
@@ -69,7 +69,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'LABEL_REPORTS.HEADER',
-        icon: 'ion-pricetags',
+        icon: 'tag',
         keepAlive: false,
       },
       children: [
@@ -86,7 +86,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'INBOX_REPORTS.HEADER',
-        icon: 'ion-archive',
+        icon: 'mail-inbox-all',
         keepAlive: false,
       },
       children: [
@@ -103,7 +103,7 @@ export default {
       component: SettingsContent,
       props: {
         headerTitle: 'TEAM_REPORTS.HEADER',
-        icon: 'ion-ios-people',
+        icon: 'people-team',
       },
       children: [
         {

app/javascript/dashboard/routes/dashboard/settings/teams/Index.vue

@@ -30,7 +30,7 @@
                       variant="link"
                       color-scheme="secondary"
                       class-names="grey-btn"
-                      icon="ion-gear-b"
+                      icon="settings"
                     >
                       {{ $t('TEAMS_SETTINGS.LIST.EDIT_TEAM') }}
                     </woot-button>
@@ -39,7 +39,7 @@
                     v-if="isAdmin"
                     variant="link"
                     color-scheme="secondary"
-                    icon="ion-close-circled"
+                    icon="dismiss-circle"
                     class-names="grey-btn"
                     :is-loading="loading[item.id]"
                     @click="openDelete(item)"

app/javascript/dashboard/routes/dashboard/settings/teams/teams.routes.js

@@ -20,7 +20,7 @@ export default {
         return {
           headerTitle: 'TEAMS_SETTINGS.HEADER',
           headerButtonText: 'TEAMS_SETTINGS.NEW_TEAM',
-          icon: 'ion-ios-people',
+          icon: 'people-team',
           newButtonRoutes: ['settings_teams_new'],
           showBackButton,
         };