From 66077ea6d7fa1bd749f397f2c2a73ba899b55325 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 7 Dec 2020 20:37:13 +0530
Subject: [PATCH] Replaced svg with icon font

---
 components/collections/add-collection.vue     |  6 +----
 components/collections/add-folder.vue         |  7 +----
 components/collections/collection.vue         |  7 ++---
 components/collections/edit-collection.vue    |  6 +----
 components/collections/edit-folder.vue        |  6 +----
 components/collections/edit-request.vue       |  6 +----
 components/collections/folder.vue             |  4 +--
 .../collections/import-export-collections.vue |  6 +----
 components/collections/request.vue            |  4 +--
 components/collections/save-request-as.vue    |  6 +----
 components/environments/add-environment.vue   |  6 +----
 components/environments/edit-environment.vue  | 10 ++-----
 components/environments/environment.vue       |  4 +--
 .../import-export-environment.vue             |  6 +----
 components/firebase/feeds.vue                 |  4 +--
 components/firebase/inputform.vue             |  4 +--
 components/firebase/logout.vue                |  4 +--
 components/layout/history.vue                 | 10 ++-----
 components/layout/pw-header.vue               | 10 +++----
 components/layout/sidenav.vue                 | 15 +++--------
 components/realtime/socketio.vue              |  6 +----
 package.json                                  |  1 -
 pages/doc.vue                                 |  7 ++---
 pages/graphql.vue                             |  4 +--
 pages/index.vue                               | 26 +++++++------------
 static/icons/add-24px.svg                     |  1 -
 static/icons/close-24px.svg                   |  1 -
 static/icons/cloud_upload-24px.svg            |  1 -
 static/icons/delete-24px.svg                  |  1 -
 static/icons/exit_to_app-24px.svg             |  1 -
 static/icons/folder-24px.svg                  |  1 -
 31 files changed, 42 insertions(+), 139 deletions(-)
 delete mode 100644 static/icons/add-24px.svg
 delete mode 100644 static/icons/close-24px.svg
 delete mode 100644 static/icons/cloud_upload-24px.svg
 delete mode 100644 static/icons/delete-24px.svg
 delete mode 100644 static/icons/exit_to_app-24px.svg
 delete mode 100644 static/icons/folder-24px.svg

diff --git a/components/collections/add-collection.vue b/components/collections/add-collection.vue
index 75a22b2bd..92a39147b 100644
--- a/components/collections/add-collection.vue
+++ b/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,
   },
diff --git a/components/collections/add-folder.vue b/components/collections/add-folder.vue
index 1c212dbb3..75c59c995 100644
--- a/components/collections/add-folder.vue
+++ b/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,
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 6ec10f47a..4eee6feaa 100644
--- a/components/collections/collection.vue
+++ b/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,
diff --git a/components/collections/edit-collection.vue b/components/collections/edit-collection.vue
index 1a9e8bb0c..30e52d7a9 100644
--- a/components/collections/edit-collection.vue
+++ b/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,
diff --git a/components/collections/edit-folder.vue b/components/collections/edit-folder.vue
index 3f383f31d..053a8f7c6 100644
--- a/components/collections/edit-folder.vue
+++ b/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,
diff --git a/components/collections/edit-request.vue b/components/collections/edit-request.vue
index c2e4e8820..a86cc8458 100644
--- a/components/collections/edit-request.vue
+++ b/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,
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index ea66e8cfd..59ddb4b66 100644
--- a/components/collections/folder.vue
+++ b/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,
diff --git a/components/collections/import-export-collections.vue b/components/collections/import-export-collections.vue
index 20d583c90..641edf135 100644
--- a/components/collections/import-export-collections.vue
+++ b/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,
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 1105ac603..5c79fe67e 100644
--- a/components/collections/request.vue
+++ b/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,
diff --git a/components/collections/save-request-as.vue b/components/collections/save-request-as.vue
index 72e05d3f7..300800879 100644
--- a/components/collections/save-request-as.vue
+++ b/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,
diff --git a/components/environments/add-environment.vue b/components/environments/add-environment.vue
index 4579eacf7..71ba6f0a4 100644
--- a/components/environments/add-environment.vue
+++ b/components/environments/add-environment.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_environment") }}</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,
   },
diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index 783a5d6e5..506072b62 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <closeIcon class="material-icons" />
+                <i class="material-icons">close</i>
               </button>
             </div>
           </div>
@@ -75,7 +75,7 @@
               v-tooltip.bottom="$t('delete')"
               id="variable"
             >
-              <deleteIcon class="material-icons" />
+              <i class="material-icons">delete</i>
             </button>
           </li>
         </div>
@@ -107,14 +107,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-    deleteIcon,
-  },
   props: {
     show: Boolean,
     editingEnvironment: Object,
diff --git a/components/environments/environment.vue b/components/environments/environment.vue
index 2f68eebf2..685338031 100644
--- a/components/environments/environment.vue
+++ b/components/environments/environment.vue
@@ -19,7 +19,7 @@
         </div>
         <div>
           <button class="icon" @click="removeEnvironment" v-close-popover>
-            <deleteIcon class="material-icons" />
+            <i class="material-icons">delete</i>
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
@@ -30,10 +30,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: { deleteIcon },
   props: {
     environment: Object,
     environmentIndex: Number,
diff --git a/components/environments/import-export-environment.vue b/components/environments/import-export-environment.vue
index 9f2aa193b..c05cdf165 100644
--- a/components/environments/import-export-environment.vue
+++ b/components/environments/import-export-environment.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</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,
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index 846a2b9ec..ef31d055d 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -12,7 +12,7 @@
           </label>
         </li>
         <button class="icon" @click="deleteFeed(feed)">
-          <deleteIcon class="material-icons" />
+          <i class="material-icons">delete</i>
         </button>
       </div>
       <div class="show-on-large-screen">
@@ -44,10 +44,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: { deleteIcon },
   data() {
     return {
       fb,
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
index 9a1b3463f..f226127c4 100644
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -30,7 +30,7 @@
           value="Save"
           @click="formPost"
         >
-          <addIcon class="material-icons" />
+          <i class="material-icons">add</i>
           <span>Add</span>
         </button>
       </div>
@@ -40,10 +40,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import addIcon from "~/static/icons/add-24px.svg?inline"
 
 export default {
-  components: { addIcon },
   data() {
     return {
       message: null,
diff --git a/components/firebase/logout.vue b/components/firebase/logout.vue
index c230e9d63..c063e1faa 100644
--- a/components/firebase/logout.vue
+++ b/components/firebase/logout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <button class="icon" @click="logout" v-close-popover>
-      <exitToAppIcon class="material-icons" />
+      <i class="material-icons">exit_to_app</i>
       <span>{{ $t("logout") }}</span>
     </button>
   </div>
@@ -9,10 +9,8 @@
 
 <script>
 import { fb } from "~/helpers/fb"
-import exitToAppIcon from "~/static/icons/exit_to_app-24px.svg?inline"
 
 export default {
-  components: { exitToAppIcon },
   data() {
     return {
       fb,
diff --git a/components/layout/history.vue b/components/layout/history.vue
index 11a130fc2..f6e19facc 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -77,7 +77,7 @@
                   :aria-label="$t('delete')"
                   v-close-popover
                 >
-                  <deleteIcon class="material-icons" />
+                  <i class="material-icons">delete</i>
                   <span>{{ $t("delete") }}</span>
                 </button>
               </div>
@@ -219,7 +219,7 @@
             @click="disableHistoryClearing"
             v-tooltip="$t('no')"
           >
-            <closeIcon class="material-icons" />
+            <i class="material-icons">close</i>
           </button>
         </div>
       </div>
@@ -274,17 +274,11 @@ ol {
 <script>
 import findStatusGroup from "~/helpers/findStatusGroup"
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property))
 
 export default {
-  components: {
-    closeIcon,
-    deleteIcon,
-  },
   data() {
     return {
       history:
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index 4487c30a4..c6840a9eb 100644
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -132,7 +132,7 @@
               <h3 class="title">{{ $t("extensions") }}</h3>
               <div>
                 <button class="icon" @click="showExtensions = false">
-                  <closeIcon class="material-icons" />
+                  <i class="material-icons">close</i>
                 </button>
               </div>
             </div>
@@ -192,7 +192,7 @@
               <h3 class="title">{{ $t("shortcuts") }}</h3>
               <div>
                 <button class="icon" @click="showShortcuts = false">
-                  <closeIcon class="material-icons" />
+                  <i class="material-icons">close</i>
                 </button>
               </div>
             </div>
@@ -262,7 +262,7 @@
               <h3 class="title">{{ $t("support_us") }}</h3>
               <div>
                 <button class="icon" @click="showSupport = false">
-                  <closeIcon class="material-icons" />
+                  <i class="material-icons">close</i>
                 </button>
               </div>
             </div>
@@ -323,12 +323,8 @@ import {
 } from "~/helpers/strategies/ExtensionStrategy"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { fb } from "~/helpers/fb"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
-  components: {
-    closeIcon,
-  },
   data() {
     return {
       // Once the PWA code is initialized, this holds a method
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index e465f592b..fafa1327e 100644
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -64,7 +64,7 @@
         <ul>
           <li>
             <a href="#request" v-tooltip.right="$t('request')">
-              <cloudUploadIcon class="material-icons" />
+              <i class="material-icons">cloud_upload</i>
             </a>
           </li>
           <li>
@@ -85,7 +85,7 @@
         <ul>
           <li>
             <a href="#request" v-tooltip.right="$t('request')">
-              <cloudUploadIcon class="material-icons" />
+              <i class="material-icons">cloud_upload</i>
             </a>
           </li>
           <li>
@@ -111,7 +111,7 @@
           </li>
           <li>
             <a href="#query" v-tooltip.right="$t('query')">
-              <cloudUploadIcon class="material-icons" />
+              <i class="material-icons">cloud_upload</i>
             </a>
           </li>
           <li>
@@ -127,7 +127,7 @@
         <ul>
           <li>
             <a href="#import" v-tooltip.right="$t('import')">
-              <folderIcon class="material-icons" />
+              <i class="material-icons">folder</i>
             </a>
           </li>
           <li>
@@ -328,14 +328,7 @@ nav.secondary-nav {
 </style>
 
 <script>
-import cloudUploadIcon from "~/static/icons/cloud_upload-24px.svg?inline"
-import folderIcon from "~/static/icons/folder-24px.svg?inline"
-
 export default {
-  components: {
-    cloudUploadIcon,
-    folderIcon,
-  },
   methods: {
     linkActive(path) {
       return {
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index afbe2bdbc..eafd3b558 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -77,7 +77,7 @@
               v-tooltip.bottom="$t('delete')"
               :id="`delete-socketio-message-${index}`"
             >
-              <deleteIcon class="material-icons" />
+              <i class="material-icons">delete</i>
             </button>
           </li>
         </div>
@@ -107,13 +107,9 @@
 <script>
 import io from "socket.io-client"
 import wildcard from "socketio-wildcard"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
-  components: {
-    deleteIcon,
-  },
   data() {
     return {
       url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
diff --git a/package.json b/package.json
index 7c84092a2..3a684d6d6 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,6 @@
     "@nuxtjs/color-mode": "^2.0.2",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.2",
-    "@nuxtjs/svg": "^0.1.12",
     "@nuxtjs/tailwindcss": "^3.3.3",
     "@testing-library/jest-dom": "^5.11.6",
     "@vue/test-utils": "^1.1.1",
diff --git a/pages/doc.vue b/pages/doc.vue
index dc99bc81f..c4f403587 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -19,7 +19,7 @@
                     @click="$refs.collectionUpload.click()"
                     v-tooltip="$t('json')"
                   >
-                    <folderIcon class="material-icons" />
+                    <i class="material-icons">folder</i>
                     <span>{{ $t("import_collections") }}</span>
                   </button>
                 </label>
@@ -75,7 +75,7 @@
           <div>
             <span class="collection" v-for="(collection, index) in this.items" :key="index">
               <h2>
-                <folderIcon class="material-icons" />
+                <i class="material-icons">folder</i>
                 {{ collection.name || $t("none") }}
               </h2>
               <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
@@ -330,10 +330,7 @@
 </style>
 
 <script>
-import folderIcon from "~/static/icons/folder-24px.svg?inline"
-
 export default {
-  components: { folderIcon },
   data() {
     return {
       collectionJSON: "[]",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 676ebc8b4..7d29d5cbe 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -81,7 +81,7 @@
                   v-tooltip.bottom="$t('delete')"
                   id="header"
                 >
-                  <deleteIcon class="material-icons" />
+                  <i class="material-icons">delete</i>
                 </button>
               </li>
             </div>
@@ -352,10 +352,8 @@ import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: { deleteIcon },
   data() {
     return {
       commonHeaders,
diff --git a/pages/index.vue b/pages/index.vue
index 90409c770..84793bbbc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -202,7 +202,7 @@
                       v-tooltip.bottom="$t('delete')"
                       id="delParam"
                     >
-                      <deleteIcon class="material-icons" />
+                      <i class="material-icons">delete</i>
                     </button>
                   </li>
                 </div>
@@ -385,7 +385,7 @@
                         v-tooltip.bottom="$t('delete')"
                         id="param"
                       >
-                        <deleteIcon class="material-icons" />
+                        <i class="material-icons">delete</i>
                       </button>
                     </li>
                   </div>
@@ -514,7 +514,7 @@
                           @click="showTokenRequest = false"
                           v-tooltip.bottom="$t('close')"
                         >
-                          <closeIcon class="material-icons" />
+                          <i class="material-icons">close</i>
                         </button>
                       </div>
                     </div>
@@ -667,7 +667,7 @@
                         v-tooltip.bottom="$t('delete')"
                         id="header"
                       >
-                        <deleteIcon class="material-icons" />
+                        <i class="material-icons">delete</i>
                       </button>
                     </li>
                   </div>
@@ -867,7 +867,7 @@
                 <h3 class="title">{{ $t("import_curl") }}</h3>
                 <div>
                   <button class="icon" @click="showModal = false">
-                    <closeIcon class="material-icons" />
+                    <i class="material-icons">close</i>
                   </button>
                 </div>
               </div>
@@ -909,7 +909,7 @@
                 <h3 class="title">{{ $t("generate_code") }}</h3>
                 <div>
                   <button class="icon" @click="isHidden = true">
-                    <closeIcon class="material-icons" />
+                    <i class="material-icons">close</i>
                   </button>
                 </div>
               </div>
@@ -981,7 +981,7 @@
                 <h3 class="title">{{ $t("manage_token") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenList = false">
-                    <closeIcon class="material-icons" />
+                    <i class="material-icons">close</i>
                   </button>
                 </div>
               </div>
@@ -1037,7 +1037,7 @@
                   @click="removeOAuthToken(index)"
                   v-tooltip.bottom="$t('delete')"
                 >
-                  <deleteIcon class="material-icons" />
+                  <i class="material-icons">delete</i>
                 </button>
               </li>
             </div>
@@ -1056,7 +1056,7 @@
                 <h3 class="title">{{ $t("manage_token_req") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenRequestList = false">
-                    <closeIcon class="material-icons" />
+                    <i class="material-icons">close</i>
                   </button>
                 </div>
               </div>
@@ -1083,7 +1083,7 @@
                     @click="removeOAuthTokenReq"
                     v-tooltip.bottom="$t('delete')"
                   >
-                    <deleteIcon class="material-icons" />
+                    <i class="material-icons">delete</i>
                   </button>
                 </div>
               </div>
@@ -1152,16 +1152,10 @@ import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpe
 import { parseUrlAndPath } from "~/helpers/utils/uri"
 import { httpValid } from "~/helpers/utils/valid"
 import { knownContentTypes, isJSONContentType } from "~/helpers/utils/contenttypes"
-import closeIcon from "~/static/icons/close-24px.svg?inline"
-import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 import { codegens, generateCodeWithGenerator } from "~/helpers/codegen/codegen"
 import findStatusGroup from "~/helpers/findStatusGroup"
 
 export default {
-  components: {
-    closeIcon,
-    deleteIcon,
-  },
   data() {
     return {
       showModal: false,
diff --git a/static/icons/add-24px.svg b/static/icons/add-24px.svg
deleted file mode 100644
index ddb7eeef5..000000000
--- a/static/icons/add-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
\ No newline at end of file
diff --git a/static/icons/close-24px.svg b/static/icons/close-24px.svg
deleted file mode 100644
index e96a4e7c1..000000000
--- a/static/icons/close-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
diff --git a/static/icons/cloud_upload-24px.svg b/static/icons/cloud_upload-24px.svg
deleted file mode 100644
index c944fc41e..000000000
--- a/static/icons/cloud_upload-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
\ No newline at end of file
diff --git a/static/icons/delete-24px.svg b/static/icons/delete-24px.svg
deleted file mode 100644
index 3acec0ade..000000000
--- a/static/icons/delete-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
\ No newline at end of file
diff --git a/static/icons/exit_to_app-24px.svg b/static/icons/exit_to_app-24px.svg
deleted file mode 100644
index 2f0decb21..000000000
--- a/static/icons/exit_to_app-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
\ No newline at end of file
diff --git a/static/icons/folder-24px.svg b/static/icons/folder-24px.svg
deleted file mode 100644
index d0bca1a11..000000000
--- a/static/icons/folder-24px.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
\ No newline at end of file