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

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>