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

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -6,6 +6,10 @@
   margin-right: var(--space-smaller);
 }
 
+.margin-left-minus-slab {
+  margin-left: var(--space-minus-slab);
+}
+
 .fs-small {
   font-size: var(--font-size-small);
 }

app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss

@@ -85,11 +85,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 27rem;
-
-    .small-icon {
-      font-size: $font-size-mini;
-      vertical-align: top;
-    }
   }
 
   .conversation--meta {

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -19,7 +19,7 @@
   cursor: pointer;
   font-size: $font-size-big;
   line-height: $space-normal;
-  padding: $space-normal $space-two;
+  padding: $space-normal;
   position: absolute;
   right: $space-micro;
   top: $space-micro;

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -31,6 +31,8 @@
 
       .wrap,
       .child-icon {
+        color: $color-gray;
+
         &:hover {
           color: $color-woot;
         }
@@ -62,7 +64,7 @@
 .bottom-nav {
   @include flex;
   @include space-between-column;
-  @include padding($space-one $space-normal $space-one $space-one);
+  @include padding($space-one);
   @include border-normal-top;
   flex-direction: column;
   position: relative;
@@ -111,16 +113,6 @@
   line-height: $global-lineheight;
 }
 
-.hamburger--menu {
-  cursor: pointer;
-  display: none;
-  margin-right: $space-normal;
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
-}
-
 .header--icon {
   display: block;
   margin-right: $space-normal;

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -10,8 +10,8 @@
       <div class="button-icon--wrap">
         <slot name="button" />
         <div class="chevron-icon__wrap">
-          <i v-if="isOpen" class="ion-minus chevron-icon"></i>
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
-          <i v-else class="ion-plus chevron-icon"></i>
+          <fluent-icon v-else size="24" icon="add" type="solid" />
         </div>
       </div>
     </button>

app/javascript/dashboard/components/ChatList.vue

@@ -27,7 +27,7 @@ l<template>
           class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
         >
-          <i class="icon ion-ios-settings-strong" />
+          <fluent-icon icon="filter" />
         </woot-button>
       </div>
     </div>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -23,7 +23,7 @@
             variant="link"
             size="medium"
             color-scheme="secondary"
-            icon="ion-trash-a"
+            icon="delete"
             class-names="delete-button"
             @click="onDelete"
           />
@@ -44,7 +44,7 @@
             @keyup.enter="onUpdate"
           />
           <div class="input-group-button">
-            <woot-button size="small" icon="ion-checkmark" @click="onUpdate" />
+            <woot-button size="small" icon="checkmark" @click="onUpdate" />
           </div>
         </div>
         <span v-if="shouldShowErrorMessage" class="error-message">
@@ -75,7 +75,7 @@
             variant="link"
             size="small"
             color-scheme="secondary"
-            icon="ion-clipboard"
+            icon="clipboard"
             class-names="edit-button"
             @click="onCopy"
           />
@@ -85,7 +85,7 @@
             variant="link"
             size="small"
             color-scheme="secondary"
-            icon="ion-compose"
+            icon="edit"
             class-names="edit-button"
             @click="onEdit"
           />

app/javascript/dashboard/components/Modal.vue

@@ -7,7 +7,9 @@
       @click="onBackDropClick"
     >
       <div :class="modalContainerClassName" @click.stop>
-        <i class="ion-android-close modal--close" @click="close"></i>
+        <button class="modal--close" @click="close">
+          <fluent-icon icon="dismiss" />
+        </button>
         <slot />
       </div>
     </div>

app/javascript/dashboard/components/NetworkNotification.vue

@@ -23,7 +23,7 @@
           {{ $t('NETWORK.BUTTON.REFRESH') }}
         </button>
         <button class="ui-close-button" @click="closeNotification">
-          <i class="ui-close-icon icon ion-ios-close-outline" />
+          <fluent-icon icon="dismiss-circle" class="ui-close-icon " />
         </button>
       </div>
     </div>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,5 +1,7 @@
 <template>
-  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick" />
+  <button @click="onMenuItemClick">
+    <fluent-icon class="hamburger--menu" icon="list" />
+  </button>
 </template>
 
 <script>
@@ -13,8 +15,14 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
+<style scoped lang="scss">
-.ion-android-menu {
+.hamburger--menu {
-  font-size: var(--font-size-big);
+  cursor: pointer;
+  display: none;
+  margin-right: var(--space-normal);
+
+  @media screen and (max-width: 1200px) {
+    display: block;
+  }
 }
 </style>

app/javascript/dashboard/components/buttons/Button.vue

@@ -1,9 +1,10 @@
 <template>
   <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <i
+    <fluent-icon
       v-if="!isLoading && icon"
       class="icon"
-      :class="buttonIconClass + ' ' + icon"
+      :class="buttonIconClass"
+      :icon="icon"
     />
     <spinner v-if="isLoading" />
     <slot></slot>

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -6,7 +6,7 @@
     :class="computedClass"
     @click="onClick"
   >
-    <i v-if="!!iconClass" :class="iconClass" class="icon" />
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
     <spinner v-if="loading" />
   </button>

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -5,8 +5,9 @@
         v-if="isOpen"
         class-names="resolve"
         color-scheme="success"
-        icon="ion-checkmark"
+        icon="checkmark"
         emoji="✅"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
@@ -16,8 +17,9 @@
         v-else-if="isResolved"
         class-names="resolve"
         color-scheme="warning"
-        icon="ion-refresh"
+        icon="arrow-redo"
         emoji="👀"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -27,7 +29,8 @@
         v-else-if="showOpenButton"
         class-names="resolve"
         color-scheme="primary"
-        icon="ion-person"
+        icon="person"
+        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -38,7 +41,8 @@
         ref="arrowDownButton"
         :color-scheme="buttonClass"
         :disabled="isLoading"
-        icon="ion-arrow-down-b"
+        icon="chevron-down"
+        icon-size="16"
         emoji="🔽"
         @click="openDropdown"
       />

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -45,7 +45,7 @@
     <div class="bottom-nav app-context-menu" @click="toggleOptions">
       <agent-details @show-options="toggleOptions" />
       <notification-bell />
-      <span class="current-user--options icon ion-android-more-vertical" />
+      <fluent-icon class="current-user--options" icon="more-vertical" />
       <options-menu
         :show="showOptionsMenu"
         @toggle-accounts="toggleAccountModal"
@@ -107,14 +107,14 @@ import router from '../../routes';
 
 export default {
   components: {
-    AgentDetails,
-    SidebarItem,
-    AvailabilityStatus,
-    NotificationBell,
-    OptionsMenu,
     AccountSelector,
     AddAccountModal,
     AddLabelModal,
+    AgentDetails,
+    AvailabilityStatus,
+    NotificationBell,
+    OptionsMenu,
+    SidebarItem,
     WootKeyShortcutModal,
   },
   mixins: [adminMixin, alertMixin, eventListenerMixins],
@@ -173,7 +173,7 @@ export default {
     },
     inboxSection() {
       return {
-        icon: 'ion-folder',
+        icon: 'folder',
         label: 'INBOXES',
         hasSubMenu: true,
         newLink: true,
@@ -193,7 +193,7 @@ export default {
     },
     labelSection() {
       return {
-        icon: 'ion-pound',
+        icon: 'number-symbol',
         label: 'LABELS',
         hasSubMenu: true,
         newLink: true,
@@ -216,7 +216,7 @@ export default {
     },
     contactLabelSection() {
       return {
-        icon: 'ion-pound',
+        icon: 'number-symbol',
         label: 'TAGGED_WITH',
         hasSubMenu: true,
         key: 'label',
@@ -239,7 +239,7 @@ export default {
     },
     teamSection() {
       return {
-        icon: 'ion-ios-people',
+        icon: 'people-team',
         label: 'TEAMS',
         hasSubMenu: true,
         newLink: true,
@@ -354,11 +354,11 @@ export default {
   cursor: pointer;
   padding: $space-small $space-large;
 
-  .ion-ios-checkmark {
+  .selected--account {
-    font-size: $font-size-big;
+    margin-top: -$space-smaller;
 
     & + .account--details {
-      padding-left: $space-normal;
+      padding-left: $space-normal - $space-micro;
     }
   }
 

app/javascript/dashboard/components/layout/SidebarItem.vue

@@ -13,14 +13,20 @@
       :title="menuItem.toolTip"
     >
       <div class="wrap">
-        <i :class="menuItem.icon" />
+        <fluent-icon
+          size="18"
+          :icon="menuItem.icon"
+          class="margin-right-small"
+        />
         {{ $t(`SIDEBAR.${menuItem.label}`) }}
       </div>
-      <span
+      <button
         v-if="showItem(menuItem)"
-        class="child-icon ion-android-add-circle"
+        class="child-icon"
         @click.prevent="newLinkClick(menuItem)"
-      />
+      >
+        <fluent-icon icon="add-circle" size="16" />
+      </button>
     </a>
     <ul v-if="menuItem.hasSubMenu" class="nested vertical menu">
       <router-link
@@ -32,10 +38,11 @@
       >
         <a href="#" :class="computedChildClass(child)">
           <div class="wrap">
-            <i
+            <fluent-icon
               v-if="menuItem.key === 'inbox'"
               class="inbox-icon"
-              :class="computedInboxClass(child)"
+              size="14"
+              :icon="computedInboxClass(child)"
             />
             <span
               v-if="child.color"
@@ -143,12 +150,4 @@ export default {
   min-width: $space-normal;
   width: $space-normal;
 }
-
-.inbox-icon {
-  position: relative;
-  top: -1px;
-  &.ion-ios-email {
-    font-size: var(--font-size-medium);
-  }
-}
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -14,7 +14,13 @@
       class="account-selector"
     >
       <a :href="`/app/accounts/${account.id}/dashboard`">
-        <i v-if="account.id === accountId" class="ion ion-ios-checkmark" />
+        <fluent-icon
+          v-if="account.id === accountId"
+          class="selected--account"
+          icon="checkmark-circle"
+          type="solid"
+          size="24"
+        />
         <label :for="account.name" class="account--details">
           <div class="account--name">{{ account.name }}</div>
           <div class="account--role">{{ account.role }}</div>

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -12,7 +12,7 @@
       <div v-if="!hasAccounts" class="alert-wrap">
         <div class="callout alert">
           <div class="icon-wrap">
-            <i class="ion-alert-circled"></i>
+            <fluent-icon icon="warning" />
           </div>
           {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
         </div>
@@ -102,18 +102,19 @@ export default {
   },
 };
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .alert-wrap {
-  margin: var(--space-zero) var(--space-large);
+  font-size: var(--font-size-small);
-  margin-top: var(--space-medium);
+  margin: var(--space-medium) var(--space-large) var(--space-zero);
+
   .callout {
+    align-items: center;
+    border-radius: var(--border-radius-normal);
     display: flex;
-    justify-content: center;
   }
 }
 
 .icon-wrap {
-  font-size: var(--font-size-big);
   margin-left: var(--space-smaller);
   margin-right: var(--space-slab);
 }

app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue

@@ -1,10 +1,12 @@
 <template>
-  <span class="notifications icon ion-ios-bell" @click.stop="showNotification">
+  <span class="notifications" @click.stop="showNotification">
+    <fluent-icon icon="alert" />
     <span v-if="unreadCount" class="unread-badge">{{ unreadCount }}</span>
   </span>
 </template>
 <script>
 import { mapGetters } from 'vuex';
+
 export default {
   computed: {
     ...mapGetters({

app/javascript/dashboard/components/layout/sidebarComponents/specs/AccountSelector.spec.js

@@ -7,10 +7,12 @@ import i18n from 'dashboard/i18n';
 
 import WootModal from 'dashboard/components/Modal';
 import WootModalHeader from 'dashboard/components/ModalHeader';
+import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 const localVue = createLocalVue();
 localVue.component('woot-modal', WootModal);
 localVue.component('woot-modal-header', WootModalHeader);
+localVue.component('fluent-icon', FluentIcon);
 
 localVue.use(Vuex);
 localVue.use(VueI18n);
@@ -84,7 +86,7 @@ describe('accountSelctor', () => {
   });
 
   it('first account item is checked', () => {
-    const accountFirstItem = accountSelector.find('.account-selector .ion');
+    const accountFirstItem = accountSelector.find('.account-selector svg');
     expect(accountFirstItem.exists()).toBe(true);
   });
 });

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<i
+<button>
-  class="ion-android-menu hamburger--menu"
+  <fluent-icon
+    class="hamburger--menu"
+    icon="list"
   />
+</button>
 `;

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: '',

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -24,12 +24,11 @@
         </span>
       </div>
       <div class="remove-file-wrap">
-        <button
+        <woot-button
-          class="remove--attachment"
+          class="remove--attachment clear secondary"
+          icon="dismiss"
           @click="() => onRemoveAttachment(index)"
-        >
+        />
-          <i class="ion-android-close"></i>
-        </button>
       </div>
     </div>
   </div>

app/javascript/dashboard/components/widgets/BackButton.vue

@@ -1,7 +1,8 @@
 <template>
-  <span class="back-button ion-ios-arrow-left" @click.capture="goBack">
+  <button class="back-button" @click.capture="goBack">
+    <fluent-icon icon="chevron-left" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
-  </span>
+  </button>
 </template>
 <script>
 import router from '../../routes/index';
@@ -28,3 +29,4 @@ export default {
   },
 };
 </script>
+<style scoped></style>

app/javascript/dashboard/components/widgets/InboxIconWithName.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="inbox">
-    <i :class="icon" />
-    <span>{{ inbox.name }}</span>
-  </div>
-</template>
-<script>
-import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
-export default {
-  props: {
-    inbox: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  computed: {
-    icon() {
-      if (this.inbox.channel_type === INBOX_TYPES.WEB) {
-        return 'icon ion-earth';
-      }
-      return 'icon ion-android-textsms';
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.inbox {
-  display: flex;
-  align-items: center;
-  .icon {
-    margin-right: var(--space-micro);
-    min-width: var(--space-normal);
-    position: relative;
-    top: -1px;
-  }
-}
-</style>

app/javascript/dashboard/components/widgets/InboxListItem.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="inbox-item">
-    <img src="~dashboard/assets/images/no_page_image.png" alt="No Page Image" />
-    <div class="item--details columns">
-      <h4 class="item--name">
-        {{ inbox.label }}
-      </h4>
-      <p class="item--sub">
-        Facebook
-      </p>
-    </div>
-    <!-- <span class="ion-chevron-right arrow"></span> -->
-  </div>
-</template>
-<script>
-/* eslint no-console: 0 */
-// import WootSwitch from '../ui/Switch';
-
-export default {
-  props: ['inbox'],
-  created() {},
-};
-</script>

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -1,8 +1,8 @@
 <template>
-  <span class="inbox--name">
+  <div class="inbox--name">
-    <i :class="computedInboxClass" />
+    <fluent-icon class="inbox--icon" :icon="computedInboxClass" size="12" />
     {{ inbox.name }}
-  </span>
+  </div>
 </template>
 <script>
 import { getInboxClassByType } from 'dashboard/helper/inbox';
@@ -25,6 +25,7 @@ export default {
 </script>
 <style scoped>
 .inbox--name {
+  display: inline-flex;
   padding: var(--space-micro) 0;
   line-height: var(--space-slab);
   font-weight: var(--font-weight-medium);
@@ -32,4 +33,8 @@ export default {
   color: var(--s-500);
   font-size: var(--font-size-mini);
 }
+
+.inbox--icon {
+  margin-right: var(--space-micro);
+}
 </style>

app/javascript/dashboard/components/widgets/SearchBox.vue

@@ -1,11 +0,0 @@
-<template>
-  <div class="search">
-    <i class="icon ion-ios-search-strong" />
-    <input class="input" type="email" :placeholder="$t('CHAT_LIST.SEARCH.INPUT')">
-  </div>
-</template>
-<script>
-export default {
-
-};
-</script>

app/javascript/dashboard/components/widgets/TableFooter.vue

@@ -20,8 +20,12 @@
           :is-disabled="hasFirstPage"
           @click="onFirstPage"
         >
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
-          <i class="ion-chevron-left" />
+          <fluent-icon
+            icon="chevron-left"
+            size="18"
+            class="margin-left-minus-slab"
+          />
         </woot-button>
         <woot-button
           size="small"
@@ -30,7 +34,7 @@
           :is-disabled="hasPrevPage"
           @click="onPrevPage"
         >
-          <i class="ion-chevron-left" />
+          <fluent-icon icon="chevron-left" size="18" />
         </woot-button>
         <woot-button
           size="small"
@@ -47,7 +51,7 @@
           :is-disabled="hasNextPage"
           @click="onNextPage"
         >
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
         </woot-button>
         <woot-button
           size="small"
@@ -57,8 +61,12 @@
           :is-disabled="hasLastPage"
           @click="onLastPage"
         >
-          <i class="ion-chevron-right" />
+          <fluent-icon icon="chevron-right" size="18" />
-          <i class="ion-chevron-right" />
+          <fluent-icon
+            icon="chevron-right"
+            size="18"
+            class="margin-left-minus-slab"
+          />
         </woot-button>
       </div>
     </div>

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -3,11 +3,12 @@
     <div class="left-wrap">
       <woot-button
         :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
-        icon="ion-happy-outline"
+        icon="emoji"
         emoji="😊"
         color-scheme="secondary"
         variant="smooth"
         size="small"
+        :icon-size="14"
         @click="toggleEmojiPicker"
       />
 
@@ -24,8 +25,9 @@
           v-if="showAttachButton"
           class-names="button--upload"
           :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-          icon="ion-android-attach"
+          icon="attach"
           emoji="📎"
+          :icon-size="14"
           color-scheme="secondary"
           variant="smooth"
           size="small"
@@ -33,8 +35,9 @@
       </file-upload>
       <woot-button
         v-if="enableRichEditor && !isOnPrivateNote"
-        icon="ion-quote"
+        icon="quote"
         emoji="🖊️"
+        :icon-size="16"
         color-scheme="secondary"
         variant="smooth"
         size="small"
@@ -46,7 +49,7 @@
           v-show="$refs.upload && $refs.upload.dropActive"
           class="modal-mask"
         >
-          <i class="ion-ios-cloud-upload-outline icon"></i>
+          <fluent-icon icon="cloud-backup" />
           <h4 class="page-sub-title">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -30,7 +30,7 @@
       v-if="popoutReplyBox"
       variant="clear"
       size="large"
-      icon="ion-android-close"
+      icon="dismiss"
       color-scheme="secondary"
       class-names="popout-button"
       @click="$emit('click')"
@@ -39,7 +39,7 @@
       v-else
       variant="clear"
       size="large"
-      icon="ion-arrow-resize"
+      icon="resize-large"
       color-scheme="secondary"
       class-names="popout-button"
       @click="$emit('click')"

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -21,7 +21,8 @@
         />
         <div class="filter-actions">
           <woot-button
-            icon="ion-plus"
+            icon="add"
+            icon-size="16"
             color-scheme="success"
             variant="smooth"
             size="small"

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -24,7 +24,7 @@
           v-if="showAssignee && assignee.name"
           class="label assignee-label text-truncate"
         >
-          <i class="ion-person" />
+          <fluent-icon icon="person" size="12" />
           {{ assignee.name }}
         </span>
       </div>
@@ -32,25 +32,41 @@
         {{ currentContact.name }}
       </h4>
       <p v-if="lastMessageInChat" class="conversation--message">
-        <i v-if="isMessagePrivate" class="ion-locked last-message-icon" />
+        <fluent-icon
-        <i v-else-if="messageByAgent" class="ion-ios-undo last-message-icon" />
+          v-if="isMessagePrivate"
-        <i
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="lock-closed"
+        />
+        <fluent-icon
+          v-else-if="messageByAgent"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="arrow-reply"
+        />
+        <fluent-icon
           v-else-if="isMessageAnActivity"
-          class="ion-information-circled last-message-icon"
+          size="16"
+          class="message--attachment-icon last-message-icon"
+          icon="info"
         />
         <span v-if="lastMessageInChat.content">
           {{ parsedLastMessage }}
         </span>
         <span v-else-if="lastMessageInChat.attachments">
-          <i :class="`small-icon ${this.$t(`${attachmentIconKey}.ICON`)}`"></i>
+          <fluent-icon
-          {{ this.$t(`${attachmentIconKey}.CONTENT`) }}
+            size="16"
+            class="message--attachment-icon"
+            :icon="attachmentIcon"
+          />
+          {{ this.$t(`${attachmentMessageContent}`) }}
         </span>
         <span v-else>
           {{ $t('CHAT_LIST.NO_CONTENT') }}
         </span>
       </p>
       <p v-else class="conversation--message">
-        <i class="ion-android-alert"></i>
+        <fluent-icon size="16" class="message--attachment-icon" icon="info" />
         <span>
           {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
@@ -76,6 +92,15 @@ import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 
+const ATTACHMENT_ICONS = {
+  image: 'image',
+  audio: 'headphones-sound-wave',
+  video: 'video',
+  file: 'document',
+  location: 'location',
+  fallback: 'link',
+};
+
 export default {
   components: {
     InboxName,
@@ -133,10 +158,18 @@ export default {
       );
     },
 
-    attachmentIconKey() {
+    lastMessageFileType() {
       const lastMessage = this.lastMessageInChat;
       const [{ file_type: fileType } = {}] = lastMessage.attachments;
-      return `CHAT_LIST.ATTACHMENTS.${fileType}`;
+      return fileType;
+    },
+
+    attachmentIcon() {
+      return ATTACHMENT_ICONS[this.lastMessageFileType];
+    },
+
+    attachmentMessageContent() {
+      return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
     },
 
     isActiveChat() {
@@ -243,14 +276,10 @@ export default {
     white-space: nowrap;
     width: 60%;
   }
-  .ion-earth {
-    font-size: var(--font-size-mini);
-  }
 }
 
 .last-message-icon {
   color: var(--s-600);
-  font-size: var(--font-size-mini);
 }
 
 .conversation--metadata {
@@ -259,16 +288,22 @@ export default {
   padding-right: var(--space-normal);
 
   .label {
-    padding: var(--space-micro) 0 var(--space-micro) 0;
-    line-height: var(--space-slab);
-    font-weight: var(--font-weight-medium);
     background: none;
     color: var(--s-500);
     font-size: var(--font-size-mini);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--space-slab);
+    padding: var(--space-micro) 0 var(--space-micro) 0;
   }
 
   .assignee-label {
+    display: inline-flex;
     max-width: 50%;
   }
 }
+
+.message--attachment-icon {
+  margin-top: var(--space-minus-micro);
+  vertical-align: middle;
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -11,10 +11,12 @@
       <div class="user--profile__meta">
         <h3 class="user--name text-truncate">
           <span class="margin-right-smaller">{{ currentContact.name }}</span>
-          <i
+          <fluent-icon
             v-if="!isHMACVerified"
             v-tooltip="$t('CONVERSATION.UNVERIFIED_SESSION')"
-            class="ion-android-alert text-y-800 fs-default"
+            class="text-y-800"
+            size="14"
+            icon="warning"
           />
         </h3>
         <div class="conversation--header--actions">

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -234,8 +234,8 @@ export default {
       return {
         email: this.contentAttributes.email,
         cc: this.contentAttributes.cc_emails,
-        bcc: this.contentAttributes.bcc_emails
+        bcc: this.contentAttributes.bcc_emails,
-      }
+      };
     },
     hasAttachments() {
       return !!(this.data.attachments && this.data.attachments.length > 0);
@@ -354,7 +354,7 @@ export default {
     }
 
     &.is-private .file.message-text__wrap {
-      .ion-document-text {
+      .file--icon {
         color: var(--w-400);
       }
       .text-block-title {

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -44,7 +44,11 @@
         class="banner-close-button"
         @click="removeTweetSelection"
       >
-        <i v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')" class="ion-close" />
+        <fluent-icon
+          v-tooltip="$t('CONVERSATION.REMOVE_SELECTION')"
+          size="16"
+          icon="dismiss"
+        />
       </button>
     </div>
     <ul class="conversation-panel">

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -4,20 +4,20 @@
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
       class="hollow secondary actions--button"
-      icon="ion-volume-mute"
+      icon="speaker-mute"
       @click="mute"
     />
     <woot-button
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
       class="hollow secondary actions--button"
-      icon="ion-volume-medium"
+      icon="speaker-1"
       @click="unmute"
     />
     <woot-button
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
       class="hollow secondary actions--button"
-      icon="ion-share"
+      icon="share"
       @click="toggleEmailActionsModal"
     />
     <resolve-action

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -2,38 +2,48 @@
   <div class="message-text--metadata">
     <span class="time">{{ readableTime }}</span>
     <span v-if="showSentIndicator" class="time">
-      <i
+      <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.SENT')"
-        class="icon ion-checkmark"
+        icon="checkmark"
+        size="16"
       />
     </span>
-    <i
+    <fluent-icon
       v-if="isEmail"
       v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
-      class="ion ion-android-mail"
+      icon="mail"
+      class="action--icon"
+      size="16"
     />
-    <i
+    <fluent-icon
       v-if="isPrivate"
       v-tooltip.top-start="$t('CONVERSATION.VISIBLE_TO_AGENTS')"
-      class="icon ion-android-lock"
+      icon="lock-closed"
+      class="action--icon"
+      size="16"
       @mouseenter="isHovered = true"
       @mouseleave="isHovered = false"
     />
-    <i
+    <button @click="onTweetReply">
+      <fluent-icon
         v-if="isATweet && (isIncoming || isOutgoing) && sourceId"
         v-tooltip.top-start="$t('CHAT_LIST.REPLY_TO_TWEET')"
-      class="icon ion-reply cursor-pointer"
+        icon="arrow-reply"
-      @click="onTweetReply"
+        class="action--icon cursor-pointer"
+        size="16"
       />
+    </button>
     <a
       v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
       target="_blank"
       rel="noopener noreferrer nofollow"
     >
-      <i
+      <fluent-icon
         v-tooltip.top-start="$t('CHAT_LIST.VIEW_TWEET_IN_TWITTER')"
-        class="icon ion-android-open cursor-pointer"
+        icon="open"
+        class="action--icon cursor-pointer"
+        size="16"
       />
     </a>
   </div>
@@ -129,7 +139,7 @@ export default {
     }
   }
 
-  .icon {
+  .action--icon {
     color: var(--white);
   }
 }
@@ -143,7 +153,7 @@ export default {
 }
 
 .message-text--metadata {
-  align-items: flex-end;
+  align-items: flex-start;
   display: flex;
 
   .time {
@@ -153,10 +163,9 @@ export default {
     line-height: 1.8;
   }
 
-  i {
+  .action--icon {
-    line-height: 1.4;
+    margin-right: var(--space-small);
-    padding-right: var(--space-small);
+    margin-left: var(--space-small);
-    padding-left: var(--space-small);
     color: var(--s-900);
   }
 

app/javascript/dashboard/components/widgets/conversation/bubble/File.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="file message-text__wrap">
     <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" class="file--icon" />
     </div>
     <div class="meta">
       <h5 class="text-block-title">

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -13,11 +13,11 @@
       @click="toggleQuotedContent"
     >
       <span v-if="showQuotedContent">
-        <i class="ion-chevron-up" />
+        <fluent-icon icon="chevron-up" class="fluent-icon" size="16" />
         {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
       </span>
       <span v-else>
-        <i class="ion-chevron-down" />
+        <fluent-icon icon="chevron-down" class="fluent-icon" size="16" />
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
@@ -104,5 +104,9 @@ export default {
   font-size: var(--font-size-mini);
   padding-bottom: var(--space-small);
   padding-top: var(--space-small);
+
+  .fluent-icon {
+    margin-bottom: var(--space-minus-smaller);
+  }
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/components/FilterInput.vue

@@ -72,7 +72,8 @@
           />
         </div>
         <woot-button
-          icon="ion-close"
+          icon="dismiss"
+          icon-size="16"
           variant="clear"
           color-scheme="secondary"
           @click="removeFilter"

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -16,7 +16,9 @@
               </p>
             </div>
           </div>
-          <i class="ion-android-close modal--close" @click="$emit('close')"></i>
+          <button class="cursor-pointer" @click="$emit('close')">
+            <fluent-icon icon="dismiss" />
+          </button>
         </div>
 
         <div class="shortcut__wrap">
@@ -111,14 +113,14 @@ export default {
 }
 
 .header-wrap {
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  margin-bottom: var(--space-slab);
 }
 
 .title-shortcut-key__wrap {
   display: flex;
-  margin-bottom: var(--space-small);
 }
 
 .page-title {

app/javascript/dashboard/helper/inbox.js

@@ -3,32 +3,35 @@ import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
 export const getInboxClassByType = (type, phoneNumber) => {
   switch (type) {
     case INBOX_TYPES.WEB:
-      return 'ion-earth';
+      return 'globe-desktop';
 
     case INBOX_TYPES.FB:
-      return 'ion-social-facebook';
+      return 'brand-facebook';
 
     case INBOX_TYPES.TWITTER:
-      return 'ion-social-twitter';
+      return 'brand-twitter';
 
     case INBOX_TYPES.TWILIO:
       return phoneNumber.startsWith('whatsapp')
-        ? 'ion-social-whatsapp-outline'
+        ? 'brand-whatsapp'
-        : 'ion-android-textsms';
+        : 'brand-sms';
 
     case INBOX_TYPES.WHATSAPP:
-      return 'ion-social-whatsapp-outline';
+      return 'brand-whatsapp';
 
     case INBOX_TYPES.API:
-      return 'ion-cloud';
+      return 'cloud';
 
     case INBOX_TYPES.EMAIL:
-      return 'ion-ios-email';
+      return 'mail';
 
     case INBOX_TYPES.TELEGRAM:
-      return 'ion-ios-navigate';
+      return 'brand-telegram';
+
+    case INBOX_TYPES.LINE:
+      return 'brand-line';
 
     default:
-      return 'ion-ios-chatbubble';
+      return 'chat';
   }
 };

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -3,33 +3,35 @@ import { getInboxClassByType } from '../inbox';
 describe('#Inbox Helpers', () => {
   describe('getInboxClassByType', () => {
     it('should return correct class for web widget', () => {
-      expect(getInboxClassByType('Channel::WebWidget')).toEqual('ion-earth');
+      expect(getInboxClassByType('Channel::WebWidget')).toEqual(
+        'globe-desktop'
+      );
     });
     it('should return correct class for fb page', () => {
       expect(getInboxClassByType('Channel::FacebookPage')).toEqual(
-        'ion-social-facebook'
+        'brand-facebook'
       );
     });
     it('should return correct class for  twitter profile', () => {
       expect(getInboxClassByType('Channel::TwitterProfile')).toEqual(
-        'ion-social-twitter'
+        'brand-twitter'
       );
     });
     it('should return correct class for twilio sms', () => {
       expect(getInboxClassByType('Channel::TwilioSms', '')).toEqual(
-        'ion-android-textsms'
+        'brand-sms'
       );
     });
     it('should return correct class for whatsapp', () => {
       expect(getInboxClassByType('Channel::TwilioSms', 'whatsapp')).toEqual(
-        'ion-social-whatsapp-outline'
+        'brand-whatsapp'
       );
     });
     it('should return correct class for Api', () => {
-      expect(getInboxClassByType('Channel::Api')).toEqual('ion-cloud');
+      expect(getInboxClassByType('Channel::Api')).toEqual('cloud');
     });
     it('should return correct class for Email', () => {
-      expect(getInboxClassByType('Channel::Email')).toEqual('ion-ios-email');
+      expect(getInboxClassByType('Channel::Email')).toEqual('mail');
     });
   });
 });

app/javascript/dashboard/i18n/locale/ar/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "رسالة صورة"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "رسالة صوتية"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "رسالة فيديو"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "مرفقات"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "الموقع الجغرافي"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "قام بمشاركة رابط"
       }
     },

app/javascript/dashboard/i18n/locale/ca/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Missatge d'imatge"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Missatge d'àudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Missatge de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Fitxer adjunt"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ubicació"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ha compartit una URL"
       }
     },

app/javascript/dashboard/i18n/locale/cs/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Zpráva obrázku"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Zvuková zpráva"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video zpráva"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Přílohu souboru"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Poloha"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "sdílel URL"
       }
     },

app/javascript/dashboard/i18n/locale/da/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Billedbesked"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Lydbesked"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video besked"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Fil Vedhæftning"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokation"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delt en URL"
       }
     },

app/javascript/dashboard/i18n/locale/de/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildnachricht"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio-Nachricht"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videonachricht"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Dateianhang"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ort"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "hat eine URL geteilt"
       }
     },

app/javascript/dashboard/i18n/locale/el/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Μήνυμα εικόνας"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Μήνυμα ήχου"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Μήνυμα βίντεο"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Επισυναπτόμενο αρχείο"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Θέση"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "έχει μοιράσει ένα σύνδεσμο"
       }
     },

app/javascript/dashboard/i18n/locale/en/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },

app/javascript/dashboard/i18n/locale/es/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensaje de imagen"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensaje de audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensaje de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Archivo adjunto"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Ubicación"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ha compartido una url"
       }
     },

app/javascript/dashboard/i18n/locale/fa/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "پیام تصویری"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "پیام صوتی"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "پیام ویدیویی"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "فایل الصاقی"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "مکان"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "یک آدرس URL به اشتراک گذاشته شده"
       }
     },

app/javascript/dashboard/i18n/locale/fi/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Kuvaviesti"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Ääniviesti"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videoviesti"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Liite"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Sijainti"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "on jakanut URL-osoitteen"
       }
     },

app/javascript/dashboard/i18n/locale/fr/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Message image"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Message audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Message vidéo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Pièce jointe"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Localisation"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "a partagé une URL"
       }
     },

app/javascript/dashboard/i18n/locale/he/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "הודעת תמונה"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "הודעות קוליות"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "הודעות וידאו"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "קובץ מצורף"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "מיקום"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "שיתף קישור"
       }
     },

app/javascript/dashboard/i18n/locale/hi/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },

app/javascript/dashboard/i18n/locale/hu/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Képüzenet"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Hangüzenet"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videoüzenet"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Csatolt file"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Hely"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "megosztott URL-t tartalmaz"
       }
     },

app/javascript/dashboard/i18n/locale/id/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Pesan gambar"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Pesan audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Pesan video"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Lampiran File"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokasi"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "telah membagikan url"
       }
     },

app/javascript/dashboard/i18n/locale/it/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Messaggio immagine"
       },
       "audio": {
-        "ICON": "-quantità-alto",
         "CONTENT": "Messaggio audio"
       },
       "video": {
-        "ICON": "videocam",
         "CONTENT": "Messaggio video"
       },
       "file": {
-        "ICON": "e-documento",
         "CONTENT": "File Allegato"
       },
       "location": {
-        "ICON": "Posizione-ios",
         "CONTENT": "Localizzazione"
       },
       "fallback": {
-        "ICON": "e-link",
         "CONTENT": "ha condiviso un url"
       }
     },

app/javascript/dashboard/i18n/locale/ja/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "画像メッセージ"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音声メッセージ"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "ビデオ メッセージ"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "添付ファイル"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "場所"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "URLを共有しています"
       }
     },

app/javascript/dashboard/i18n/locale/ko/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "사진 메시지"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "음성 메시지"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "영상 메시지"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "파일 첨부"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "장소"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "URL을 공유함"
       }
     },

app/javascript/dashboard/i18n/locale/ml/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "ചിത്ര സന്ദേശം"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ഓഡിയോ സന്ദേശം"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "വീഡിയോ സന്ദേശം"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "ഫയൽ അറ്റാച്ചുമെന്റ്"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "സ്ഥാനം"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ഒരു യു. ആർ. എൽ പങ്കിട്ടു"
       }
     },

app/javascript/dashboard/i18n/locale/ne/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },

app/javascript/dashboard/i18n/locale/nl/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bericht met foto"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audiobericht"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videobericht"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Bestandsbijlage"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Locatie"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "heeft een url gedeeld"
       }
     },

app/javascript/dashboard/i18n/locale/no/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildemelding"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Lydmelding"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video beskjed"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Vedlegg"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Plassering"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delt en URL"
       }
     },

app/javascript/dashboard/i18n/locale/pl/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Wiadomość obrazkowa"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Wiadomość audio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Wiadomość wideo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Załącznik pliku"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Lokalizacja"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "udostępnił adres url"
       }
     },

app/javascript/dashboard/i18n/locale/pt/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensagem de imagem"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensagem de áudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Arquivo anexo"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Local:"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "compartilhou uma url"
       }
     },

app/javascript/dashboard/i18n/locale/pt_BR/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Mensagem de imagem"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Mensagem de áudio"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Mensagem de vídeo"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Arquivo anexo"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Localização"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "compartilhou uma URL"
       }
     },

app/javascript/dashboard/i18n/locale/ru/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Изображение"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Аудиосообщение"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Видео"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Прикрепленный файл"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Местоположение"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "поделился ссылкой"
       }
     },

app/javascript/dashboard/i18n/locale/sk/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Picture message"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Audio message"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video message"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "File Attachment"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Location"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "has shared a url"
       }
     },

app/javascript/dashboard/i18n/locale/sv/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Bildmeddelande"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Ljudmeddelande"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Videomeddelande"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Bifogad fil"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Plats"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "har delat en webbadress"
       }
     },

app/javascript/dashboard/i18n/locale/ta/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "பட செய்தி"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ஆடியோ செய்தி"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "வீடியோ செய்தி"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "பைல் இணைப்புகள்"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "இருப்பிடம்"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ஒரு URL ஐப் பகிர்ந்துள்ளார்"
       }
     },

app/javascript/dashboard/i18n/locale/th/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "ข้อความภาพ"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "ข้อความเสียง"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "ข้อความวิดิโอ"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "เเนบไฟล์"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "สถานที่"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "ได้เเชร์ลิ้ง"
       }
     },

app/javascript/dashboard/i18n/locale/tr/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Görsel mesaj"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Sesli mesaj"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Video mesajı"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Dosya eklentisi"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Yer"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "bir url paylaştı"
       }
     },

app/javascript/dashboard/i18n/locale/uk/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Повідомлення з картинкою"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Аудіо-повідомлення"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Відеоповідомлення"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Повідомлення з файлом"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Місцезнаходження"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "поділився посиланням"
       }
     },

app/javascript/dashboard/i18n/locale/vi/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "Tin nhắn hình ảnh"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "Tin nhắn thoại"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "Tin nhắn video"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "Tập tin đính kèm"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "Địa điểm"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "có một đường dẫn chia sẻ"
       }
     },

app/javascript/dashboard/i18n/locale/zh/chatlist.json

@@ -53,27 +53,21 @@
     ],
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "图片消息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音频消息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "视频消息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一个网址"
       }
     },

app/javascript/dashboard/i18n/locale/zh_CN/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "图片消息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "音频消息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "视频消息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一个网址"
       }
     },

app/javascript/dashboard/i18n/locale/zh_TW/chatlist.json

@@ -54,27 +54,21 @@
     },
     "ATTACHMENTS": {
       "image": {
-        "ICON": "ion-image",
         "CONTENT": "圖片訊息"
       },
       "audio": {
-        "ICON": "ion-volume-high",
         "CONTENT": "聲音訊息"
       },
       "video": {
-        "ICON": "ion-ios-videocam",
         "CONTENT": "影片訊息"
       },
       "file": {
-        "ICON": "ion-document",
         "CONTENT": "附件"
       },
       "location": {
-        "ICON": "ion-ios-location",
         "CONTENT": "位置"
       },
       "fallback": {
-        "ICON": "ion-link",
         "CONTENT": "分享了一個網址"
       }
     },

app/javascript/dashboard/i18n/sidebarItems/campaigns.js

@@ -4,21 +4,21 @@ const campaigns = accountId => ({
   routes: ['settings_account_campaigns', 'one_off'],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     ongoingCampaigns: {
-      icon: 'ion-arrow-swap',
+      icon: 'arrow-swap',
       label: 'ONGOING',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
       toStateName: 'settings_account_campaigns',
     },
     onOffCampaigns: {
-      icon: 'ion-radio-waves',
+      icon: 'sound-source',
       label: 'ONE_OFF',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns/one_off`),

app/javascript/dashboard/i18n/sidebarItems/common.js

@@ -17,7 +17,7 @@ const common = accountId => ({
   ],
   menuItems: {
     assignedToMe: {
-      icon: 'ion-chatbox-working',
+      icon: 'chat',
       label: 'CONVERSATIONS',
       hasSubMenu: false,
       key: '',
@@ -26,35 +26,35 @@ const common = accountId => ({
       toStateName: 'home',
     },
     contacts: {
-      icon: 'ion-person',
+      icon: 'book-contacts',
       label: 'CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),
       toStateName: 'contacts_dashboard',
     },
     notifications: {
-      icon: 'ion-ios-bell',
+      icon: 'alert',
       label: 'NOTIFICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/notifications`),
       toStateName: 'notifications_dashboard',
     },
     report: {
-      icon: 'ion-arrow-graph-up-right',
+      icon: 'arrow-trending-lines',
       label: 'REPORTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports`),
       toStateName: 'settings_account_reports',
     },
     campaigns: {
-      icon: 'ion-speakerphone',
+      icon: 'megaphone',
       label: 'CAMPAIGNS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/campaigns`),
       toStateName: 'settings_account_campaigns',
     },
     settings: {
-      icon: 'ion-settings',
+      icon: 'settings',
       label: 'SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings`),

app/javascript/dashboard/i18n/sidebarItems/contacts.js

@@ -8,14 +8,14 @@ const contacts = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     contacts: {
-      icon: 'ion-person',
+      icon: 'contact-card-group',
       label: 'ALL_CONTACTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/contacts`),

app/javascript/dashboard/i18n/sidebarItems/reports.js

@@ -11,49 +11,49 @@ const reports = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     reportOverview: {
-      icon: 'ion-arrow-graph-up-right',
+      icon: 'arrow-trending-lines',
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
       toStateName: 'settings_account_reports',
     },
     csatReports: {
-      icon: 'ion-happy',
+      icon: 'emoji',
       label: 'CSAT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
       toStateName: 'csat_reports',
     },
     agentReports: {
-      icon: 'ion-person-stalker',
+      icon: 'people',
       label: 'REPORTS_AGENT',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/agent`),
       toStateName: 'agent_reports',
     },
     labelReports: {
-      icon: 'ion-pricetags',
+      icon: 'tag',
       label: 'REPORTS_LABEL',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/label`),
       toStateName: 'label_reports',
     },
     inboxReports: {
-      icon: 'ion-archive',
+      icon: 'mail-inbox-all',
       label: 'REPORTS_INBOX',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/inboxes`),
       toStateName: 'inbox_reports',
     },
     teamReports: {
-      icon: 'ion-ios-people',
+      icon: 'people-team',
       label: 'REPORTS_TEAM',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/teams`),

app/javascript/dashboard/i18n/sidebarItems/settings.js

@@ -32,42 +32,42 @@ const settings = accountId => ({
   ],
   menuItems: {
     back: {
-      icon: 'ion-ios-arrow-back',
+      icon: 'chevron-left',
       label: 'HOME',
       hasSubMenu: false,
       toStateName: 'home',
       toState: frontendURL(`accounts/${accountId}/dashboard`),
     },
     agents: {
-      icon: 'ion-person-stalker',
+      icon: 'people',
       label: 'AGENTS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/agents/list`),
       toStateName: 'agent_list',
     },
     teams: {
-      icon: 'ion-ios-people',
+      icon: 'people-team',
       label: 'TEAMS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/teams/list`),
       toStateName: 'settings_teams_list',
     },
     inboxes: {
-      icon: 'ion-archive',
+      icon: 'mail-inbox-all',
       label: 'INBOXES',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/inboxes/list`),
       toStateName: 'settings_inbox_list',
     },
     labels: {
-      icon: 'ion-pricetags',
+      icon: 'tag',
       label: 'LABELS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/labels/list`),
       toStateName: 'labels_list',
     },
     attributes: {
-      icon: 'ion-code',
+      icon: 'code',
       label: 'CUSTOM_ATTRIBUTES',
       hasSubMenu: false,
       toState: frontendURL(
@@ -76,14 +76,14 @@ const settings = accountId => ({
       toStateName: 'attributes_list',
     },
     automation: {
-      icon: 'ion-wrench',
+      icon: 'autocorrect',
       label: 'AUTOMATION',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
     },
     cannedResponses: {
-      icon: 'ion-chatbox-working',
+      icon: 'chat-multiple',
       label: 'CANNED_RESPONSES',
       hasSubMenu: false,
       toState: frontendURL(
@@ -92,21 +92,21 @@ const settings = accountId => ({
       toStateName: 'canned_list',
     },
     settings_integrations: {
-      icon: 'ion-flash',
+      icon: 'flash-on',
       label: 'INTEGRATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/integrations`),
       toStateName: 'settings_integrations',
     },
     settings_applications: {
-      icon: 'ion-asterisk',
+      icon: 'star-emphasis',
       label: 'APPLICATIONS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/applications`),
       toStateName: 'settings_applications',
     },
     general_settings_index: {
-      icon: 'ion-gear-a',
+      icon: 'settings',
       label: 'ACCOUNT_SETTINGS',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/general`),

app/javascript/dashboard/mixins/specs/attributeFixtures.js

@@ -18,7 +18,7 @@ export default [
     attribute_model: 'conversation_attribute',
     created_at: '2021-09-16T13:06:47.329Z',
     default_value: null,
-    icon: 'ion-calculator',
+    icon: 'fluent-calculator',
     id: 10,
     updated_at: '2021-09-22T10:42:25.873Z',
     value: 2021,

app/javascript/dashboard/mixins/specs/attributeMixin.spec.js

@@ -70,7 +70,7 @@ describe('attributeMixin', () => {
         attribute_model: 'conversation_attribute',
         created_at: '2021-09-16T13:06:47.329Z',
         default_value: null,
-        icon: 'ion-calculator',
+        icon: 'fluent-calculator',
         id: 10,
         updated_at: '2021-09-22T10:42:25.873Z',
         value: 2021,

app/javascript/dashboard/modules/contact/components/ContactAttribute.vue

@@ -36,7 +36,7 @@
         variant="clear link"
         size="small"
         color-scheme="secondary"
-        icon="ion-compose"
+        icon="edit"
         class-names="edit-button"
         @click="onEdit"
       />

app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue

@@ -10,10 +10,11 @@
       </h5>
       <p class="option__body">
         <span v-if="email" class="email-icon-wrap">
-          <i class="icon ion-email" />{{ email }}
+          <fluent-icon class="merge-contact--icon" icon="mail" size="12" />
+          {{ email }}
         </span>
         <span v-if="phoneNumber" class="phone-icon-wrap">
-          <i class="icon ion-ios-telephone" />
+          <fluent-icon class="merge-contact--icon" icon="call" size="12" />
           {{ phoneNumber }}
         </span>
         <span v-if="!phoneNumber && !email">{{ '---' }}</span>
@@ -102,4 +103,9 @@ export default {
     width: auto;
   }
 }
+
+.merge-contact--icon {
+  margin-bottom: var(--space-minus-micro);
+  margin-right: var(--space-micro);
+}
 </style>

app/javascript/dashboard/modules/contact/components/ContactFields.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="contact-fields">
-    <h3 class="block-title title">{{ $t('CONTACTS_PAGE.FIELDS') }}</h3>
+    <h3 class="block-title title">
+      {{ $t('CONTACTS_PAGE.FIELDS') }}
+    </h3>
     <attribute
       :label="$t('CONTACT_PANEL.EMAIL_ADDRESS')"
-      icon="ion-email"
+      icon="mail"
       emoji=""
       :value="contact.email"
       :show-edit="true"
@@ -11,7 +13,7 @@
     />
     <attribute
       :label="$t('CONTACT_PANEL.PHONE_NUMBER')"
-      icon="ion-ios-telephone"
+      icon="call"
       emoji=""
       :value="contact.phone_number"
       :show-edit="true"
@@ -20,7 +22,7 @@
     <attribute
       v-if="additionalAttributes.location"
       :label="$t('CONTACT_PANEL.LOCATION')"
-      icon="ion-map"
+      icon="map"
       emoji="🌍"
       :value="additionalAttributes.location"
       :show-edit="true"
@@ -33,7 +35,7 @@
     >
       <attribute
         :label="attribute"
-        icon="ion-arrow-right-c"
+        icon="chevron-right"
         :value="customAttributes[attribute]"
         :show-edit="true"
         @update="value => onCustomAttributeUpdate(attribute, value)"
@@ -42,7 +44,7 @@
     <woot-button
       size="small"
       variant="link"
-      icon="ion-plus"
+      icon="add"
       @click="handleCustomCreate"
     >
       {{ $t('CUSTOM_ATTRIBUTES.ADD.TITLE') }}

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -33,7 +33,7 @@
       <woot-button
         variant="hollow"
         size="small expanded"
-        icon="ion-compose"
+        icon="edit"
         @click="onEditClick"
       >
         {{ $t('EDIT_CONTACT.BUTTON_LABEL') }}

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -33,7 +33,7 @@
 
       <div class="child-contact-wrap">
         <div class="child-arrow">
-          <i class="ion-ios-arrow-up up" />
+          <fluent-icon icon="arrow-up" class="up" size="17" />
         </div>
         <div
           class="child-contact multiselect-wrap--medium"
@@ -213,8 +213,8 @@ export default {
 
 .up {
   position: absolute;
-  top: -11px;
+  top: var(--space-minus-smaller);
-  left: var(--space-normal);
+  left: var(--space-slab);
 }
 
 .footer {

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="context-menu">
     <woot-button
-      icon="ion-more"
+      icon="more-vertical"
-      size="large"
       class="button--delete-message"
       color-scheme="secondary"
       variant="link"
@@ -19,7 +18,8 @@
           <woot-button
             variant="clear"
             size="small"
-            icon="ion-ios-copy-outline"
+            icon="clipboard"
+            icon-size="16"
             @click="handleCopy"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@@ -30,7 +30,8 @@
             variant="clear"
             color-scheme="alert"
             size="small"
-            icon="ion-trash-a"
+            icon="delete"
+            icon-size="16"
             @click="handleDelete"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -19,7 +19,8 @@
           v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
-          icon="ion-trash-b"
+          icon="delete"
+          icon-size="16"
           color-scheme="secondary"
           @click="onDelete"
         />

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">
+    <woot-button
-      <i class="ion-chevron-right" />
+      icon="chevron-right"
-    </span>
+      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;