feat: Remove ionicons v2 dependency on widget (#3402)

app/javascript/widget/components/FileBubble.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="file message-text__wrap">
+  <div class="file flex flex-row items-center p-3 cursor-pointer">
     <div class="icon-wrap">
-      <i class="ion-document-text"></i>
+      <fluent-icon icon="document" size="28" />
     </div>
     <div class="meta">
       <div class="title">
         {{ title }}
       </div>
-      <div class="link-wrap">
+      <div class="link-wrap mb-1">
         <a
           class="download"
           rel="noreferrer noopener nofollow"
@@ -22,7 +22,12 @@
 </template>
 
 <script>
+import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+
 export default {
+  components: {
+    FluentIcon,
+  },
   props: {
     url: {
       type: String,
@@ -61,11 +66,6 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .file {
-  display: flex;
-  flex-direction: row;
-  padding: $space-slab;
-  cursor: pointer;
-
   .icon-wrap {
     font-size: $font-size-mega;
     color: $color-woot;