Introduce component wrapper for svg icons

components/firebase/feeds.vue

@@ -8,7 +8,7 @@
           </label>
         </li>
         <button class="icon" @click="deleteFeed(feed)">
-          <i class="material-icons">delete</i>
+          <deleteIcon class="material-icons" />
         </button>
       </div>
       <div class="show-on-large-screen">
@@ -50,8 +50,10 @@ ol {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   data() {
     return {
       fb,

components/firebase/inputform.vue

@@ -30,7 +30,7 @@
           value="Save"
           @click="formPost"
         >
-          <i class="material-icons">add</i>
+          <addIcon class="material-icons" />
           <span>Add</span>
         </button>
       </div>
@@ -47,8 +47,10 @@ ol {
 
 <script>
 import { fb } from "~/helpers/fb"
+import addIcon from "~/static/icons/add-24px.svg?inline"
 
 export default {
+  components: { addIcon },
   data() {
     return {
       message: null,

components/firebase/logout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <button class="icon" @click="logout" v-close-popover>
-      <i class="material-icons">exit_to_app</i>
+      <exitToAppIcon class="material-icons" />
       <span>{{ $t("logout") }}</span>
     </button>
   </div>
@@ -10,8 +10,10 @@
 <script>
 import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"
+import exitToAppIcon from "~/static/icons/exit_to_app-24px.svg?inline"
 
 export default {
+  components: { exitToAppIcon },
   data() {
     return {
       fb,