Replaced svg with icon font

components/collections/add-collection.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -44,12 +44,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   props: {
     show: Boolean,
   },

components/collections/add-folder.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -43,12 +43,7 @@
 </template>
 
 <script>
-import closeIcon from "~/static/icons/close-24px.svg?inline"
-
 export default {
-  components: {
-    closeIcon,
-  },
   props: {
     show: Boolean,
     folder: Object,

components/collections/collection.vue

@@ -12,7 +12,7 @@
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
         <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-        <folderIcon class="material-icons" />
+        <i class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
       </button>
       <div>
@@ -47,7 +47,7 @@
             </div>
             <div>
               <button class="icon" @click="removeCollection" v-close-popover>
-                <deleteIcon class="material-icons" />
+                <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
               </button>
             </div>
@@ -102,11 +102,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import folderIcon from "~/static/icons/folder-24px.svg?inline"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: { folderIcon, deleteIcon },
   props: {
     collectionIndex: Number,
     collection: Object,

components/collections/edit-collection.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -44,12 +44,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   props: {
     show: Boolean,
     editingCollection: Object,

components/collections/edit-folder.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -39,12 +39,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   props: {
     show: Boolean,
     collectionIndex: Number,

components/collections/edit-request.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_request") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -42,12 +42,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   props: {
     show: Boolean,
     collectionIndex: Number,

components/collections/folder.vue

@@ -44,7 +44,7 @@
           </div>
           <div>
             <button class="icon" @click="removeFolder" v-close-popover>
-              <deleteIcon class="material-icons" />
+              <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>
           </div>
@@ -90,10 +90,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: { deleteIcon },
   name: "folder",
   props: {
     folder: Object,

components/collections/import-export-collections.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -77,12 +77,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   data() {
     return {
       fb,

components/collections/request.vue

@@ -42,7 +42,7 @@
         </div>
         <div>
           <button class="icon" @click="removeRequest" v-close-popover>
-            <deleteIcon class="material-icons" />
+            <i class="material-icons">delete</i>
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
@@ -53,10 +53,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: { deleteIcon },
   props: {
     request: Object,
     collectionIndex: Number,

components/collections/save-request-as.vue

@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("save_request_as") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -76,12 +76,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   props: {
     show: Boolean,
     editingRequest: Object,