dev-feature/analyze-bundle (#529)

* add bundle analyzer

* use svg icons - closes #522

* fix recent recipes icon

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/.env.development

@@ -1 +1,2 @@
-VUE_APP_API_BASE_URL=http://localhost:9000
+VUE_APP_API_BASE_URL=http://localhost:9000
+PREVIEW_BUNDLE=true

frontend/package-lock.json

@@ -2202,6 +2202,12 @@
       "integrity": "sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==",
       "dev": true
     },
+    "@mdi/js": {
+      "version": "5.9.55",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-5.9.55.tgz",
+      "integrity": "sha512-BbeHMgeK2/vjdJIRnx12wvQ6s8xAYfvMmEAVsUx9b+7GiQGQ9Za8jpwp17dMKr9CgKRvemlAM4S7S3QOtEbp4A==",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -2218,6 +2224,12 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@polka/url": {
+      "version": "1.0.0-next.15",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
+      "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA==",
+      "dev": true
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -11189,6 +11201,17 @@
         }
       }
     },
+    "sirv": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.12.tgz",
+      "integrity": "sha512-+jQoCxndz7L2tqQL4ZyzfDhky0W/4ZJip3XoOuxyQWnAwMxindLl3Xv1qT4x1YX/re0leShvTm8Uk0kQspGhBg==",
+      "dev": true,
+      "requires": {
+        "@polka/url": "^1.0.0-next.15",
+        "mime": "^2.3.1",
+        "totalist": "^1.0.0"
+      }
+    },
     "slash": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -12222,6 +12245,12 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
+      "dev": true
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -12751,6 +12780,116 @@
         }
       }
     },
+    "vue-cli-plugin-webpack-bundle-analyzer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-webpack-bundle-analyzer/-/vue-cli-plugin-webpack-bundle-analyzer-4.0.0.tgz",
+      "integrity": "sha512-gEQt8RMh0j9aD591PXjuMJMoKG6Aaylsi2rZHDiDRE9zGEk7wlUMrIVGwL9bYnMAHSHkojQL4oQinM3WBxCDew==",
+      "dev": true,
+      "requires": {
+        "webpack-bundle-analyzer": "^4.2.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.4.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.0.tgz",
+          "integrity": "sha512-ULr0LDaEqQrMFGyQ3bhJkLsbtrQ8QibAseGZeaSUiT/6zb9IvIkomWHJIvgvwad+hinRAgsI51JcWk2yvwyL+w==",
+          "dev": true
+        },
+        "acorn-walk": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.1.0.tgz",
+          "integrity": "sha512-mjmzmv12YIG/G8JQdQuz2MUDShEJ6teYpT5bmWA4q7iwoGen8xtt3twF3OvzIUl+Q06aWIjvnwQUKvQ6TtMRjg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        },
+        "gzip-size": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+          "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+          "dev": true,
+          "requires": {
+            "duplexer": "^0.1.2"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "webpack-bundle-analyzer": {
+          "version": "4.4.2",
+          "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz",
+          "integrity": "sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.0.4",
+            "acorn-walk": "^8.0.0",
+            "chalk": "^4.1.0",
+            "commander": "^6.2.0",
+            "gzip-size": "^6.0.0",
+            "lodash": "^4.17.20",
+            "opener": "^1.5.2",
+            "sirv": "^1.0.7",
+            "ws": "^7.3.1"
+          }
+        },
+        "ws": {
+          "version": "7.5.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
+          "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
+          "dev": true
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",

frontend/package.json

@@ -27,6 +27,7 @@
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^1.1.0",
     "@mdi/font": "^5.9.55",
+    "@mdi/js": "^5.9.55",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.13",
     "@vue/cli-plugin-pwa": "~4.5.0",
@@ -38,6 +39,7 @@
     "sass-loader": "^8.0.2",
     "vue-cli-plugin-i18n": "~1.0.1",
     "vue-cli-plugin-vuetify": "^2.4.1",
+    "vue-cli-plugin-webpack-bundle-analyzer": "^4.0.0",
     "vue-template-compiler": "^2.6.14",
     "vuetify-loader": "^1.7.2"
   },

frontend/src/components/Fallbacks/The404.vue

@@ -32,9 +32,9 @@ export default {
   data() {
     return {
       buttons: [
-        { icon: "mdi-home", to: "/", text: "Home" },
+        { icon: this.$globals.icons.home, to: "/", text: "Home" },
         { icon: this.$globals.icons.primary, to: "/recipes/all", text: "All Recipes" },
-        { icon: "mdi-magnify", to: "/search", text: "Search" },
+        { icon: this.$globals.icons.search, to: "/search", text: "Search" },
       ],
     };
   },

frontend/src/components/FormHelpers/LanguageSelector.vue

@@ -4,7 +4,7 @@
     :items="allLanguages"
     item-text="name"
     :label="$t('settings.language')"
-    prepend-icon="mdi-translate"
+    :prepend-icon="$globals.icons.translate"
     :value="selectedItem"
     @input="setLanguage"
   >

frontend/src/components/FormHelpers/TimePickerDialog.vue

@@ -4,7 +4,7 @@
       <v-text-field
         v-model="time"
         :label="$t('settings.set-new-time')"
-        prepend-icon="mdi-clock-time-four-outline"
+        :prepend-icon="$globals.icons.clockOutline"
         readonly
         v-bind="attrs"
         v-on="on"

frontend/src/components/ImportSummaryDialog/index.vue

@@ -4,7 +4,7 @@
       <v-card>
         <v-app-bar dark color="primary mb-2">
           <v-icon large left>
-            mdi-import
+            {{ $globals.icons.import }}
           </v-icon>
           <v-toolbar-title class="headline">
             {{ $t("settings.backup.import-summary") }}

frontend/src/components/Login/LoginForm.vue

@@ -14,18 +14,21 @@
       <v-card-text>
         <v-text-field
           v-model="user.email"
-          prepend-icon="mdi-email"
+          :prepend-icon="$globals.icons.email"
           validate-on-blur
+          autocomplete
+          autofocus
           :label="`${$t('user.email')} or ${$t('user.username')} `"
           type="email"
         ></v-text-field>
         <v-text-field
           v-model="user.password"
           class="mb-2s"
-          prepend-icon="mdi-lock"
+          autocomplete
+          :prepend-icon="$globals.icons.lock"
           :label="$t('user.password')"
           :type="showPassword ? 'text' : 'password'"
-          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          :append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
           @click:append="showPassword = !showPassword"
         ></v-text-field>
         <v-card-actions>

frontend/src/components/Login/SignUpForm.vue

@@ -34,7 +34,7 @@
         <v-text-field
           v-model="user.email"
           light="light"
-          prepend-icon="mdi-email"
+          :prepend-icon="$globals.icons.email"
           validate-on-blur
           :rules="[existsRule, emailRule]"
           :label="$t('user.email')"
@@ -44,7 +44,7 @@
           v-model="user.password"
           light="light"
           class="mb-2s"
-          prepend-icon="mdi-lock"
+          :prepend-icon="$globals.icons.lock"
           validate-on-blur
           :label="$t('user.password')"
           :type="showPassword ? 'text' : 'password'"
@@ -54,10 +54,10 @@
           v-model="user.passwordConfirm"
           light="light"
           class="mb-2s"
-          prepend-icon="mdi-lock"
+          :prepend-icon="$globals.icons.lock"
           :label="$t('user.password')"
           :type="showPassword ? 'text' : 'password'"
-          :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
+          :append-icon="showPassword ? $globals.icons.eye : $globals.icons.eyeOff"
           :rules="[user.password === user.passwordConfirm || $t('user.password-must-match')]"
           @click:append="showPassword = !showPassword"
         ></v-text-field>

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -3,7 +3,7 @@
     <v-card-title class=" headline">
       {{ $t("meal-plan.create-a-new-meal-plan") }}
       <v-btn color="info" class="ml-auto" @click="setQuickWeek()">
-        <v-icon left>mdi-calendar-minus</v-icon>
+        <v-icon left> {{ $globals.icons.calendarMinus }} </v-icon>
         {{ $t("meal-plan.quick-week") }}
       </v-btn>
     </v-card-title>
@@ -26,7 +26,7 @@
                 v-model="startComputedDateFormatted"
                 :label="$t('meal-plan.start-date')"
                 persistent-hint
-                prepend-icon="mdi-calendar"
+                :prepend-icon="$globals.icons.calendarMinus"
                 readonly
                 v-bind="attrs"
                 v-on="on"
@@ -50,7 +50,7 @@
                 v-model="endComputedDateFormatted"
                 :label="$t('meal-plan.end-date')"
                 persistent-hint
-                prepend-icon="mdi-calendar"
+                :prepend-icon="$globals.icons.calendarMinus"
                 readonly
                 v-bind="attrs"
                 v-on="on"
@@ -69,7 +69,7 @@
       <v-card-actions class="mr-5">
         <TheButton edit @click="random" v-if="planDays.length > 0" text>
           <template v-slot:icon>
-            mdi-dice-multiple
+            {{ $globals.icons.diceMultiple }}
           </template>
           {{ $t("general.random") }}
         </TheButton>

frontend/src/components/Recipe/CommentSection/index.vue

@@ -2,9 +2,9 @@
   <v-card>
     <v-card-title class="headline">
       <v-icon large class="mr-2">
-        mdi-comment-text-multiple-outline
+        {{ $globals.icons.commentTextMultipleOutline }}
       </v-icon>
-      {{ $t('recipe.comments') }}
+      {{ $t("recipe.comments") }}
     </v-card-title>
     <v-divider class="mx-2"></v-divider>
     <v-card class="ma-2" v-for="(comment, index) in comments" :key="comment.id">
@@ -43,7 +43,7 @@
     <v-card-text v-if="loggedIn">
       <v-textarea auto-grow row-height="1" outlined v-model="newComment"> </v-textarea>
       <div class="d-flex">
-        <TheButton class="ml-auto" create @click="createNewComment"> {{ $t('recipe.comment-action') }} </TheButton>
+        <TheButton class="ml-auto" create @click="createNewComment"> {{ $t("recipe.comment-action") }} </TheButton>
       </div>
     </v-card-text>
   </v-card>

frontend/src/components/Recipe/ContextMenu.vue

@@ -4,7 +4,7 @@
       :title="$t('recipe.delete-recipe')"
       :message="$t('recipe.delete-confirmation')"
       color="error"
-      icon="mdi-alert-circle"
+      :icon="$globals.icons.alertCircle"
       ref="deleteRecipieConfirm"
       v-on:confirm="deleteRecipe()"
     />
@@ -21,7 +21,7 @@
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn :fab="fab" :small="fab" :color="color" :icon="!fab" dark v-bind="attrs" v-on="on" @click.prevent>
-          <v-icon>{{ menuIcon }}</v-icon>
+          <v-icon>{{ effMenuIcon }}</v-icon>
         </v-btn>
       </template>
       <v-list dense>
@@ -65,7 +65,7 @@ export default {
       type: String,
     },
     menuIcon: {
-      default: "mdi-dots-vertical",
+      default: null,
     },
     name: {
       type: String,
@@ -76,6 +76,9 @@ export default {
     },
   },
   computed: {
+    effMenuIcon() {
+      return this.menuIcon ? this.menuIcon : this.$globals.icons.dotsVertical;
+    },
     loggedIn() {
       return this.$store.getters.getIsLoggedIn;
     },
@@ -89,13 +92,13 @@ export default {
       return [
         {
           title: this.$t("general.print"),
-          icon: "mdi-printer",
+          icon: this.$globals.icons.printer,
           color: "accent",
           action: "print",
         },
         {
           title: this.$t("general.share"),
-          icon: "mdi-share-variant",
+          icon: this.$globals.icons.shareVariant,
           color: "accent",
           action: "share",
         },

frontend/src/components/Recipe/FavoriteBadge.vue

@@ -12,7 +12,7 @@
         v-on="on"
       >
         <v-icon :small="!buttonStyle" color="secondary">
-          {{ isFavorite ? "mdi-heart" : "mdi-heart-outline" }}
+          {{ isFavorite ? $globals.icons.heart : $globals.icons.heartOutline }}
         </v-icon>
       </v-btn>
     </template>

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -34,11 +34,7 @@
               :value="rating"
             ></v-rating>
             <v-spacer></v-spacer>
-            <ContextMenu
+            <ContextMenu :slug="slug" :menu-icon="$globals.icons.dotsHorizontal" :name="name" />
-                :slug="slug"
-                menu-icon="mdi-dots-horizontal"
-                :name="name"
-            />
           </div>
         </v-list-item-content>
       </v-list-item>

frontend/src/components/Recipe/Parts/Assets.vue

@@ -8,14 +8,14 @@
       <v-list :flat="!edit" v-if="value.length > 0">
         <v-list-item v-for="(item, i) in value" :key="i">
           <v-list-item-icon class="ma-auto">
-            <v-icon v-text="item.icon"></v-icon>
+            <v-icon v-text="getIcon(item.icon)"></v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title class="pl-2" v-text="item.name"></v-list-item-title>
           </v-list-item-content>
           <v-list-item-action>
             <v-btn v-if="!edit" color="primary" icon :href="assetURL(item.fileName)" target="_blank" top>
-              <v-icon> mdi-download</v-icon>
+              <v-icon> {{ $globals.icons.download }} </v-icon>
             </v-btn>
             <div v-else>
               <v-btn color="error" icon @click="deleteAsset(i)" top>
@@ -29,7 +29,7 @@
     </v-card>
     <div class="d-flex ml-auto mt-2">
       <v-spacer></v-spacer>
-      <base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="newAsset.icon">
+      <base-dialog @submit="addAsset" :title="$t('recipe.new-asset')" :title-icon="getIcon(newAsset.icon)">
         <template v-slot:open="{ open }">
           <v-btn color="secondary" dark @click="open" v-if="edit">
             <v-icon>{{ $globals.icons.create }}</v-icon>
@@ -38,11 +38,17 @@
         <v-card-text class="pt-2">
           <v-text-field dense v-model="newAsset.name" :label="$t('general.name')"></v-text-field>
           <div class="d-flex justify-space-between">
-            <v-select dense :prepend-icon="newAsset.icon" v-model="newAsset.icon" :items="iconOptions" class="mr-2">
+            <v-select
+              dense
+              :prepend-icon="getIcon(newAsset.icon)"
+              v-model="newAsset.icon"
+              :items="iconOptions"
+              class="mr-2"
+            >
               <template v-slot:item="{ item }">
                 <v-list-item-avatar>
                   <v-icon class="mr-auto">
-                    {{ item }}
+                    {{ getIcon(item) }}
                   </v-icon>
                 </v-list-item-avatar>
                 {{ item }}
@@ -86,23 +92,6 @@ export default {
         icon: "mdi-file",
       },
       iconOptions: ["mdi-file", "mdi-file-pdf-box", "mdi-file-image", "mdi-code-json", "mdi-silverware-fork-knife"],
-      menu: [
-        {
-          title: "Link 1",
-          icon: "mdi-file",
-          action: "Do Something",
-        },
-        {
-          title: "Link 1",
-          icon: "mdi-file",
-          action: "Do Something",
-        },
-        {
-          title: "Link 1",
-          icon: "mdi-file",
-          action: "Do Something",
-        },
-      ],
     };
   },
   computed: {
@@ -111,6 +100,22 @@ export default {
     },
   },
   methods: {
+    getIcon(val) {
+      switch (val) {
+        case "mdi-file":
+          return this.$globals.icons.file;
+        case "mdi-file-pdf-box":
+          return this.$globals.icons.filePDF;
+        case "mdi-file-image":
+          return this.$globals.icons.fileImage;
+        case "mdi-code-json":
+          return this.$globals.icons.codeJson;
+        case "mdi-silverware-fork-knife":
+          return this.$globals.icons.primary;
+        default:
+          return this.$globals.icons.file;
+      }
+    },
     assetURL(assetName) {
       return api.recipes.recipeAssetPath(this.slug, assetName);
     },
@@ -138,4 +143,3 @@ export default {
 };
 </script>
 
-<style scoped></style>

frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue

@@ -4,7 +4,7 @@
       <template v-slot:activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
           <v-icon left>
-            mdi-image
+            {{ $globals.icons.fileImage }}
           </v-icon>
           {{ $t("general.image") }}
         </v-btn>

frontend/src/components/Recipe/Parts/Helpers/SettingsMenu.vue

@@ -4,7 +4,7 @@
       <template v-slot:activator="{ on, attrs }">
         <v-btn color="accent" dark v-bind="attrs" v-on="on">
           <v-icon left>
-            mdi-cog
+            {{ $globals.icons.cog }}
           </v-icon>
           {{ $t("general.settings") }}
         </v-btn>

frontend/src/components/Recipe/Parts/Ingredients.vue

@@ -10,14 +10,13 @@
                 class="mr-2"
                 :label="$t('recipe.ingredient')"
                 v-model="value[index].note"
-                mdi-move-resize
                 auto-grow
                 solo
                 dense
                 rows="1"
               >
                 <template slot="append-outer">
-                  <v-icon class="handle">mdi-arrow-up-down</v-icon>
+                  <v-icon class="handle">{{ $globals.icons.arrowUpDown }}</v-icon>
                 </template>
                 <v-icon class="mr-n1" slot="prepend" color="error" @click="removeByIndex(value, index)">
                   {{ $globals.icons.delete }}

frontend/src/components/Recipe/PrintView.vue

@@ -33,9 +33,9 @@
       <ul>
         <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index">
           <v-icon>
-            mdi-checkbox-blank-outline
+            {{ $globals.icons.checkboxBlankOutline }}
           </v-icon>
-          <p>{{ ingredient }}</p>
+          <p>{{ ingredient.note }}</p>
         </li>
       </ul>
     </div>

frontend/src/components/Recipe/RecipePageActionMenu.vue

@@ -12,7 +12,7 @@
       :title="$t('recipe.delete-recipe')"
       :message="$t('recipe.delete-confirmation')"
       color="error"
-      icon="mdi-alert-circle"
+      :icon="$globals.icons.alertCircle"
       ref="deleteRecipieConfirm"
       v-on:confirm="emitDelete()"
     />
@@ -30,7 +30,7 @@
         :menu-top="false"
         :slug="slug"
         :name="name"
-        menu-icon="mdi-dots-horizontal"
+        :menu-icon="$globals.icons.mdiDotsHorizontal"
         fab
         color="info"
         :card-menu="false"
@@ -80,36 +80,36 @@ export default {
       edit: false,
     };
   },
-  
+
   computed: {
-      editorButtons() {
+    editorButtons() {
-        return [
+      return [
-          {
+        {
-            text: this.$t('general.delete'),
+          text: this.$t("general.delete"),
-            icon: this.$globals.icons.delete,
+          icon: this.$globals.icons.delete,
-            event: DELETE_EVENT,
+          event: DELETE_EVENT,
-            color: "error",
+          color: "error",
-          },
+        },
-          {
+        {
-            text: this.$t('general.json'),
+          text: this.$t("general.json"),
-            icon: "mdi-code-braces",
+          icon: this.$globals.icons.codeBraces,
-            event: JSON_EVENT,
+          event: JSON_EVENT,
-            color: "accent",
+          color: "accent",
-          },
+        },
-          {
+        {
-            text: this.$t('general.close'),
+          text: this.$t("general.close"),
-            icon: "mdi-close",
+          icon: this.$globals.icons.close,
-            event: CLOSE_EVENT,
+          event: CLOSE_EVENT,
-            color: "",
+          color: "",
-          },
+        },
-          {
+        {
-            text: this.$t('general.save'),
+          text: this.$t("general.save"),
-            icon: this.$globals.icons.save,
+          icon: this.$globals.icons.save,
-            event: SAVE_EVENT,
+          event: SAVE_EVENT,
-            color: "success",
+          color: "success",
-          },
+        },
-        ]; 
+      ];
-      },
+    },
   },
   methods: {
     emitHandler(event) {

frontend/src/components/Recipe/RecipeTimeCard.vue

@@ -2,7 +2,7 @@
   <div>
     <v-chip label color="accent custom-transparent" class="ma-1" v-for="(time, index) in allTimes" :key="index">
       <v-icon left>
-        mdi-clock-outline
+        {{ $globals.icons.clockOutline }}
       </v-icon>
       {{ time.name }} |
       {{ time.value }}

frontend/src/components/UI/Buttons/TheCopyButton.vue

@@ -20,12 +20,12 @@
         @blur="on.blur"
         retain-focus-on-click
       >
-        <v-icon>mdi-content-copy</v-icon>
+        <v-icon>{{ $globals.icons.contentCopy }}</v-icon>
       </v-btn>
     </template>
     <span>
       <v-icon left dark>
-        mdi-clipboard-check
+        {{ $globals.icons.clipboardCheck }}
       </v-icon>
       <slot> {{ $t("general.copied") }}! </slot>
     </span>

frontend/src/components/UI/Buttons/TheUploadBtn.vue

@@ -3,7 +3,7 @@
     <input ref="uploader" class="d-none" type="file" @change="onFileChanged" />
     <slot v-bind="{ isSelecting, onButtonClick }">
       <v-btn :loading="isSelecting" @click="onButtonClick" :small="small" color="accent" :text="textBtn">
-        <v-icon left> {{ icon }}</v-icon>
+        <v-icon left> {{ effIcon }}</v-icon>
         {{ text ? text : defaultText }}
       </v-btn>
     </slot>
@@ -24,7 +24,7 @@ export default {
     },
     url: String,
     text: String,
-    icon: { default: "mdi-cloud-upload" },
+    icon: { default: null },
     fileName: { default: "archive" },
     textBtn: {
       default: true,
@@ -36,6 +36,9 @@ export default {
   }),
 
   computed: {
+    effIcon() {
+      return this.icon ? this.icon : this.$globals.icons.upload;
+    },
     defaultText() {
       return this.$t("general.upload");
     },

frontend/src/components/UI/CardSection.vue

@@ -8,7 +8,7 @@
       <v-spacer></v-spacer>
       <v-btn :icon="$vuetify.breakpoint.xsOnly" text @click="navigateRandom">
         <v-icon :left="!$vuetify.breakpoint.xsOnly">
-          mdi-dice-multiple
+          {{ $globals.icons.diceMultiple }}
         </v-icon>
         {{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
       </v-btn>
@@ -16,7 +16,7 @@
         <template v-slot:activator="{ on, attrs }">
           <v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
             <v-icon :left="!$vuetify.breakpoint.xsOnly">
-              mdi-sort
+              {{ $globals.icons.diceMultiple }}
             </v-icon>
             {{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
           </v-btn>
@@ -24,31 +24,31 @@
         <v-list>
           <v-list-item @click="sortRecipes(EVENTS.az)">
             <v-icon left>
-              mdi-order-alphabetical-ascending
+              {{ $globals.icons.orderAlphabeticalAscending }}
             </v-icon>
             <v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.rating)">
             <v-icon left>
-              mdi-star
+              {{ $globals.icons.star }}
             </v-icon>
             <v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.created)">
             <v-icon left>
-              mdi-new-box
+              {{ $globals.icons.newBox }}
             </v-icon>
             <v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.updated)">
             <v-icon left>
-              mdi-update
+              {{ $globals.icons.update }}
             </v-icon>
             <v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
           </v-list-item>
           <v-list-item @click="sortRecipes(EVENTS.shuffle)">
             <v-icon left>
-              mdi-shuffle-variant
+              {{ $globals.icons.shuffleVariant }}
             </v-icon>
             <v-list-item-title>{{ $t("general.shuffle") }}</v-list-item-title>
           </v-list-item>

frontend/src/components/UI/Dialogs/BackupDialog.vue

@@ -2,7 +2,7 @@
   <div>
     <BaseDialog
       :title="$t('settings.backup.create-heading')"
-      titleIcon="mdi-database"
+      :titleIcon="$globals.icons.database"
       @submit="createBackup"
       :submit-text="$t('general.create')"
       :loading="loading"

frontend/src/components/UI/Dialogs/ImportDialog.vue

@@ -2,7 +2,7 @@
   <div class="text-center">
     <BaseDialog
       :title="name"
-      titleIcon="mdi-database"
+      :titleIcon="$globals.icons.database"
       :submit-text="$t('general.import')"
       :loading="loading"
       ref="baseDialog"
@@ -28,7 +28,7 @@
         <TheDownloadBtn :download-url="downloadUrl">
           <template v-slot:default="{ downloadFile }">
             <v-btn class="mr-1" color="info" @click="downloadFile">
-              <v-icon left> mdi-download </v-icon>
+              <v-icon left> {{ $globals.icons.download }}</v-icon>
               {{ $t("general.download") }}
             </v-btn>
           </template>

frontend/src/components/UI/Dialogs/SearchDialog.vue

@@ -26,22 +26,22 @@
             hide-details
             single-line
             :placeholder="$t('search.search')"
-            prepend-inner-icon="mdi-magnify"
+            :prepend-inner-icon="$globals.icons.search"
           >
           </v-text-field>
         </FuseSearchBar>
         <v-btn v-if="isMobile" x-small fab light @click="dialog = false">
           <v-icon>
-            mdi-close
+            {{ $globals.icons.close }}
           </v-icon>
         </v-btn>
       </v-app-bar>
       <v-card class="mt-1 pa-1" relative>
         <v-card-actions>
           <div class="mr-auto">
-            {{ $t('search.results') }}
+            {{ $t("search.results") }}
           </div>
-          <router-link to="/search"> {{ $t('search.advanced-search') }} </router-link>
+          <router-link to="/search"> {{ $t("search.advanced-search") }} </router-link>
         </v-card-actions>
         <v-card-actions v-if="loading">
           <SiteLoader :loading="loading" />

frontend/src/components/UI/GlobalSnackbar.vue

@@ -32,13 +32,13 @@ export default {
     icon() {
       switch (this.snackbar.color) {
         case "error":
-          return "mdi-alert";
+          return this.$globals.icons.alert;
         case "success":
-          return "mdi-checkbox-marked-circle";
+          return this.$globals.icons.checkboxMarkedCircle;
         case "info":
-          return "mdi-information";
+          return this.$globals.icons.information;
         default:
-          return "mdi-bell-alert";
+          return this.$globals.icons.bellAlert;
       }
     },
   },

frontend/src/components/UI/LogCard.vue

@@ -9,7 +9,7 @@
           solo
           :label="$t('about.log-lines')"
           type="number"
-          append-icon="mdi-refresh-circle"
+          :append-icon="$globals.icons.refreshCircle"
           v-model="lines"
           @click:append="getLogText"
           suffix="lines"
@@ -19,7 +19,7 @@
         <TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log">
           <template v-slot:default="{ downloadFile }">
             <v-btn bottom right relative fab icon color="primary" @click="downloadFile">
-              <v-icon> mdi-download </v-icon>
+              <v-icon> {{ $globals.icons.download }}</v-icon>
             </v-btn>
           </template>
         </TheDownloadBtn>

frontend/src/components/UI/Search/SearchBar.vue

@@ -18,7 +18,7 @@
       >
         <template #prepend-inner>
           <v-icon color="grey lighten-3" size="29">
-            mdi-magnify
+            {{ $globals.icons.search }}
           </v-icon>
         </template>
       </v-text-field>

frontend/src/components/UI/Search/SearchDialog.vue

@@ -34,7 +34,7 @@
           </div>
         </v-card-text>
         <v-btn v-if="isMobile" fab bottom @click="dialog = false" class="ma-2">
-          <v-icon> mdi-close </v-icon>
+          <v-icon> {{ $globals.icons.close }} </v-icon>
         </v-btn>
       </v-card>
     </v-dialog>

frontend/src/components/UI/TheAppBar.vue

@@ -3,7 +3,7 @@
     <TheSidebar ref="theSidebar" />
     <v-app-bar clipped-left dense app color="primary" dark class="d-print-none" :bottom="isMobile">
       <v-btn icon @click="openSidebar">
-        <v-icon> mdi-menu </v-icon>
+        <v-icon> {{ $globals.icons.menu }}</v-icon>
       </v-btn>
       <router-link to="/">
         <v-btn icon>
@@ -21,7 +21,7 @@
       <v-tooltip bottom>
         <template v-slot:activator="{ on, attrs }">
           <v-btn icon class="mr-1" small v-bind="attrs" v-on="on" @click="isDark = !isDark">
-            <v-icon v-text="isDark ? 'mdi-weather-sunny' : 'mdi-weather-night'"> </v-icon>
+            <v-icon v-text="isDark ? $globals.icons.weatherSunny : $globals.icons.weatherNight"> </v-icon>
           </v-btn>
         </template>
         <span>{{ isDark ? $t("settings.theme.switch-to-light-mode") : $t("settings.theme.switch-to-dark-mode") }}</span>
@@ -31,7 +31,7 @@
       </div>
       <div v-else>
         <v-btn icon @click="$refs.recipeSearch.open()">
-          <v-icon> mdi-magnify </v-icon>
+          <v-icon> {{ $globals.icons.search }} </v-icon>
         </v-btn>
         <SearchDialog ref="recipeSearch" />
       </div>

frontend/src/components/UI/TheRecipeFab.vue

@@ -3,7 +3,7 @@
     <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
       <v-card :loading="processing">
         <v-app-bar dark color="primary mb-2">
-          <v-icon large left v-if="!processing"> mdi-link </v-icon>
+          <v-icon large left v-if="!processing"> {{ $globals.icons.link }} </v-icon>
           <v-progress-circular v-else indeterminate color="white" large class="mr-2"> </v-progress-circular>
 
           <v-toolbar-title class="headline">
@@ -29,7 +29,7 @@
             <v-expand-transition>
               <v-alert v-if="error" color="error" class="mt-6 white--text">
                 <v-card-title class="ma-0 pa-0">
-                  <v-icon left color="white" x-large> mdi-robot </v-icon>
+                  <v-icon left color="white" x-large> {{ $globals.icons.robot }} </v-icon>
                   {{ $t("new-recipe.error-title") }}
                 </v-card-title>
                 <v-divider class="my-3 mx-2"></v-divider>
@@ -60,7 +60,7 @@
                     :to="{ path: '/recipes/debugger', query: { test_url: recipeURL } }"
                     @click="addRecipe = false"
                   >
-                    <v-icon> mdi-external-link </v-icon>
+                    <v-icon left> {{ $globals.icons.externalLink }} </v-icon>
                     View Scraped Data
                   </v-btn>
                 </div>
@@ -72,7 +72,7 @@
 
           <v-card-actions>
             <v-btn color="grey" text @click="reset">
-              <v-icon left> mdi-close </v-icon>
+              <v-icon left> {{ $globals.icons.close }}</v-icon>
               {{ $t("general.close") }}
             </v-btn>
             <v-spacer></v-spacer>
@@ -93,7 +93,7 @@
       <v-tooltip left dark color="primary">
         <template v-slot:activator="{ on, attrs }">
           <v-btn fab dark small color="primary" v-bind="attrs" v-on="on" @click="addRecipe = true">
-            <v-icon>mdi-link</v-icon>
+            <v-icon>{{ $globals.icons.link }} </v-icon>
           </v-btn>
         </template>
         <span>{{ $t("new-recipe.from-url") }}</span>

frontend/src/components/UI/TheSidebar.vue

@@ -6,10 +6,10 @@
 
         <v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
           <v-list-item-icon>
-            <v-icon> mdi-heart </v-icon>
+            <v-icon> {{ $globals.icons.heart }} </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title> {{ $t('general.favorites') }} </v-list-item-title>
+            <v-list-item-title> {{ $t("general.favorites") }} </v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </template>
@@ -28,13 +28,13 @@
       <v-list nav dense class="fixedBottom" v-if="!isMain">
         <v-list-item href="https://github.com/sponsors/hay-kot" target="_target">
           <v-list-item-icon>
-            <v-icon color="pink"> mdi-heart </v-icon>
+            <v-icon color="pink"> {{ $globals.icons.heart }} </v-icon>
           </v-list-item-icon>
           <v-list-item-title> {{ $t("about.support") }} </v-list-item-title>
         </v-list-item>
         <v-list-item to="/admin/about">
           <v-list-item-icon class="mr-3 pt-1">
-            <v-icon :color="newVersionAvailable ? 'red--text' : ''"> mdi-information </v-icon>
+            <v-icon :color="newVersionAvailable ? 'red--text' : ''"> {{ $globals.icons.information }} </v-icon>
           </v-list-item-icon>
           <v-list-item-content>
             <v-list-item-title>
@@ -99,17 +99,17 @@ export default {
     baseMainLinks() {
       return [
         {
-          icon: "mdi-home",
+          icon: this.$globals.icons.home,
           to: "/",
           title: this.$t("page.home-page"),
         },
         {
-          icon: "mdi-magnify",
+          icon: this.$globals.icons.search,
           to: "/search",
           title: this.$t("search.search"),
         },
         {
-          icon: "mdi-view-module",
+          icon: this.$globals.icons.viewModule,
           to: "/recipes/all",
           title: this.$t("page.all-recipes"),
         },
@@ -129,7 +129,7 @@ export default {
       const pages = this.$store.getters.getCustomPages;
       if (pages.length > 0) {
         pages.sort((a, b) => a.position - b.position);
-        return pages.map((x) => ({
+        return pages.map(x => ({
           title: x.name,
           to: `/pages/${x.slug}`,
           icon: this.$globals.icons.pages,
@@ -152,17 +152,17 @@ export default {
     adminLinks() {
       return [
         {
-          icon: "mdi-view-dashboard",
+          icon: this.$globals.icons.viewDashboard,
           to: "/admin/dashboard",
           title: this.$t("general.dashboard"),
         },
         {
-          icon: "mdi-cog",
+          icon: this.$globals.icons.cog,
           to: "/admin/settings",
           title: this.$t("settings.site-settings"),
         },
         {
-          icon: "mdi-tools",
+          icon: this.$globals.icons.tools,
           to: "/admin/toolbox",
           title: this.$t("settings.toolbox.toolbox"),
         },
@@ -172,7 +172,7 @@ export default {
           title: this.$t("user.manage-users"),
         },
         {
-          icon: "mdi-database-import",
+          icon: this.$globals.icons.import,
           to: "/admin/migrations",
           title: this.$t("settings.migrations"),
         },

frontend/src/components/UI/TheSiteMenu.vue

@@ -46,37 +46,37 @@ export default {
           login: true,
         },
         {
-          icon: "mdi-calendar-week",
+          icon: this.$globals.icons.calendarWeek,
           title: this.$t("meal-plan.dinner-this-week"),
           nav: "/meal-plan/this-week",
           restricted: true,
         },
         {
-          icon: "mdi-calendar-today",
+          icon: this.$globals.icons.calendarToday,
           title: this.$t("meal-plan.dinner-today"),
           nav: "/meal-plan/today",
           restricted: true,
         },
         {
-          icon: "mdi-calendar-multiselect",
+          icon: this.$globals.icons.calendarMultiselect,
           title: this.$t("meal-plan.planner"),
           nav: "/meal-plan/planner",
           restricted: true,
         },
         {
-          icon: "mdi-format-list-checks",
+          icon: this.$globals.icons.formatListCheck,
-          title: this.$t('shopping-list.shopping-lists'),
+          title: this.$t("shopping-list.shopping-lists"),
           nav: "/shopping-list",
           restricted: true,
         },
         {
-          icon: "mdi-logout",
+          icon: this.$globals.icons.logout,
           title: this.$t("user.logout"),
           restricted: true,
           nav: "/logout",
         },
         {
-          icon: "mdi-cog",
+          icon: this.$globals.icons.cog,
           title: this.$t("general.settings"),
           nav: "/admin",
           restricted: true,

frontend/src/main.js

@@ -6,7 +6,7 @@ import VueRouter from "vue-router";
 import { router } from "./routes";
 import { globals } from "@/utils/globals";
 import i18n from "./i18n";
-import "@mdi/font/css/materialdesignicons.css";
+// import "@mdi/font/css/materialdesignicons.css";
 import "typeface-roboto/index.css";
 import "./registerServiceWorker";
 

frontend/src/pages/Admin/About/index.vue

@@ -4,27 +4,27 @@
       <v-spacer></v-spacer>
       <v-btn href="https://github.com/sponsors/hay-kot" target="_blank" class="mx-1" color="secondary">
         <v-icon left>
-          mdi-heart
+          {{ $globals.icons.heart }}
         </v-icon>
-        {{$t('about.support')}}
+        {{ $t("about.support") }}
       </v-btn>
       <v-btn href="https://github.com/hay-kot" target="_blank" class="mx-1" color="secondary">
         <v-icon left>
-          mdi-github
+          {{ $globals.icons.github }}
         </v-icon>
-        {{$t('about.github')}}
+        {{ $t("about.github") }}
       </v-btn>
       <v-btn href="https://hay-kot.dev" target="_blank" class="mx-1" color="secondary">
         <v-icon left>
-          mdi-account
+          {{ $globals.icons.account }}
         </v-icon>
-        {{$t('about.portfolio')}}
+        {{ $t("about.portfolio") }}
       </v-btn>
       <v-btn href="https://hay-kot.github.io/mealie/" target="_blank" class="mx-1" color="secondary">
         <v-icon left>
-          mdi-folder-outline
+          {{ $globals.icons.folderOutline }}
         </v-icon>
-        {{$t('about.docs')}}
+        {{ $t("about.docs") }}
       </v-btn>
       <v-spacer></v-spacer>
     </v-app-bar>
@@ -53,7 +53,7 @@
         <TheDownloadBtn download-url="/api/debug/last-recipe-json">
           <template v-slot:default="{ downloadFile }">
             <v-btn color="primary" @click="downloadFile">
-              <v-icon left> mdi-code-braces </v-icon> {{ $t("about.download-recipe-json") }}
+              <v-icon left> {{ $globals.icons.codeBraces }} </v-icon> {{ $t("about.download-recipe-json") }}
             </v-btn>
           </template>
         </TheDownloadBtn>
@@ -85,37 +85,37 @@ export default {
       this.prettyInfo = [
         {
           name: this.$t("about.version"),
-          icon: "mdi-information",
+          icon: this.$globals.icons.information,
           value: debugInfo.version,
         },
         {
           name: this.$t("about.application-mode"),
-          icon: "mdi-dev-to",
+          icon: this.$globals.icons.devTo,
           value: debugInfo.production ? this.$t("about.production") : this.$t("about.development"),
         },
         {
           name: this.$t("about.demo-status"),
-          icon: "mdi-test-tube",
+          icon: this.$globals.icons.testTube,
           value: debugInfo.demoStatus ? this.$t("about.demo") : this.$t("about.not-demo"),
         },
         {
           name: this.$t("about.api-port"),
-          icon: "mdi-api",
+          icon: this.$globals.icons.api,
           value: debugInfo.apiPort,
         },
         {
           name: this.$t("about.api-docs"),
-          icon: "mdi-file-document",
+          icon: this.$globals.icons.file,
           value: debugInfo.apiDocs ? this.$t("general.enabled") : this.$t("general.disabled"),
         },
         {
           name: this.$t("about.database-type"),
-          icon: "mdi-database",
+          icon: this.$globals.icons.database,
           value: debugInfo.dbType,
         },
         {
           name: this.$t("about.database-url"),
-          icon: "mdi-file-cabinet",
+          icon: this.$globals.icons.database,
           value: debugInfo.dbUrl,
         },
         {

frontend/src/pages/Admin/Dashboard/BackupViewer.vue

@@ -8,7 +8,7 @@
       @import="importBackup"
       @delete="deleteBackup"
     />
-    <StatCard icon="mdi-backup-restore" :color="color">
+    <StatCard :icon="$globals.icons.backupRestore" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
           <h2 class="body-3 grey--text font-weight-light">
@@ -24,7 +24,7 @@
         <TheUploadBtn url="/api/backups/upload" @uploaded="getAvailableBackups">
           <template v-slot="{ isSelecting, onButtonClick }">
             <v-btn :loading="isSelecting" class="mx-2" small color="info" @click="onButtonClick">
-              <v-icon left> mdi-cloud-upload </v-icon> {{ $t("general.upload") }}
+              <v-icon left> {{ $globals.icons.upload }} </v-icon> {{ $t("general.upload") }}
             </v-btn>
           </template>
         </TheUploadBtn>
@@ -40,7 +40,7 @@
             <v-list-item @click.prevent="openDialog(item)">
               <v-list-item-avatar>
                 <v-icon large dark :color="color">
-                  mdi-database
+                  {{ $globals.icons.database }}
                 </v-icon>
               </v-list-item-avatar>
 

frontend/src/pages/Admin/Dashboard/EventViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <StatCard icon="mdi-bell-ring" :color="color">
+    <StatCard :icon="$globals.icons.bellAlert" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
           <h2 class="body-3 grey--text font-weight-light">
@@ -14,7 +14,7 @@
       </template>
       <div class="d-flex row py-3 justify-end">
         <v-btn class="mx-2" small color="error lighten-1" @click="deleteAll">
-          <v-icon left> mdi-notification-clear-all </v-icon> {{ $t("general.clear") }}
+          <v-icon left> {{ $globals.icons.notificationClearAll }} </v-icon> {{ $t("general.clear") }}
         </v-btn>
       </div>
       <template v-slot:bottom>
@@ -61,23 +61,23 @@ export default {
       events: [],
       icons: {
         general: {
-          icon: "mdi-information",
+          icon: this.$globals.icons.information,
           color: "info",
         },
         recipe: {
-          icon: "mdi-silverware-fork-knife",
+          icon: this.$globals.icons.primary,
           color: "primary",
         },
         backup: {
-          icon: "mdi-database",
+          icon: this.$globals.icons.database,
           color: "primary",
         },
         schedule: {
-          icon: "mdi-calendar-clock",
+          icon: this.$globals.icons.calendar,
           color: "primary",
         },
         migration: {
-          icon: "mdi-database-import",
+          icon: this.$globals.icons.backupRestore,
           color: "primary",
         },
         user: {

frontend/src/pages/Admin/Dashboard/index.vue

@@ -2,7 +2,7 @@
   <div class="mt-10">
     <v-row>
       <v-col cols="12" sm="12" md="4">
-        <StatCard icon="mdi-silverware-fork-knife">
+        <StatCard :icon="$globals.icons.primary">
           <template v-slot:after-heading>
             <div class="ml-auto text-right">
               <h2 class="body-3 grey--text font-weight-light">

frontend/src/pages/Admin/ManageUsers/GroupCard.vue

@@ -8,7 +8,7 @@
           groupName: group.name,
         })
       "
-      icon="mdi-alert"
+      :icon="$globals.icons.alert"
       @confirm="deleteGroup"
       :width="450"
       @close="closeGroupDelete"
@@ -100,17 +100,17 @@ export default {
         },
         {
           text: this.$t("user.total-mealplans"),
-          icon: "mdi-food",
+          icon: this.$globals.icons.food,
           value: this.group.mealplans.length,
         },
         {
           text: this.$t("user.webhooks-enabled"),
-          icon: "mdi-webhook",
+          icon: this.$globals.icons.webhook,
           value: this.group.webhookEnable ? this.$t("general.yes") : this.$t("general.no"),
         },
         {
           text: this.$t("user.webhook-time"),
-          icon: "mdi-clock-outline",
+          icon: this.$globals.icons.clockOutline,
           value: this.group.webhookTime,
         },
       ];

frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue

@@ -8,7 +8,7 @@
             v-model="filter"
             clearable
             class="mr-2 pt-0"
-            append-icon="mdi-filter"
+            :append-icon="$globals.icons.filter"
             :label="$t('general.filter')"
             single-line
             hide-details

frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue

@@ -8,14 +8,14 @@
           link: activeName,
         })
       "
-      icon="mdi-alert"
+      :icon="$globals.icons.alert"
       @confirm="deleteToken"
       :width="450"
       @close="closeDelete"
     />
     <v-toolbar flat>
       <v-icon large color="accent" class="mr-1">
-        mdi-link-variant
+        {{ $globals.icons.externalLink }}
       </v-icon>
       <v-toolbar-title class="headine">
         {{ $t("signup.sign-up-links") }}
@@ -75,7 +75,7 @@
         <template v-slot:item.admin="{ item }">
           <v-btn small :color="item.admin ? 'success' : 'error'" text>
             <v-icon small left>
-              mdi-account-cog
+              {{ $globals.icons.admin }}
             </v-icon>
             {{ item.admin ? $t("general.yes") : $t("general.no") }}
           </v-btn>

frontend/src/pages/Admin/ManageUsers/TheUserTable.vue

@@ -9,7 +9,7 @@
           activeId,
         })
       "
-      icon="mdi-alert"
+      :icon="$globals.icons.alert"
       @confirm="deleteUser"
       :width="450"
       @close="closeDelete"
@@ -20,7 +20,7 @@
         <v-text-field
           v-model="search"
           class="mr-2"
-          append-icon="mdi-filter"
+          :append-icon="$globals.icons.filter"
           :label="$t('general.filter')"
           single-line
           hide-details
@@ -117,7 +117,7 @@
           </v-btn>
           <v-btn small color="success" @click="editItem(item)">
             <v-icon small left class="mr-2">
-              mdi-pencil
+              {{ $globals.icons.edit }}
             </v-icon>
             {{ $t("general.edit") }}
           </v-btn>

frontend/src/pages/Admin/ManageUsers/index.vue

@@ -11,7 +11,7 @@
 
         <v-tab href="#sign-ups">
           {{ $t("signup.sign-up-links") }}
-          <v-icon>mdi-account-plus-outline</v-icon>
+          <v-icon>{{ $globals.icons.accountPlusOutline }}</v-icon>
         </v-tab>
 
         <v-tab href="#groups" @click="reqGroups">

frontend/src/pages/Admin/Migration/MigrationCard.vue

@@ -20,7 +20,7 @@
         <v-card-text>
           <v-row align="center">
             <v-col cols="2">
-              <v-icon large color="primary">mdi-import</v-icon>
+              <v-icon large color="primary">{{ $globals.icons.import }}</v-icon>
             </v-col>
             <v-col cols="10">
               <div class="text-truncate">

frontend/src/pages/Admin/Migration/MigrationDialog.vue

@@ -4,7 +4,7 @@
       <v-card>
         <v-app-bar dark color="primary mb-2">
           <v-icon large left>
-            mdi-import
+            {{ $globals.icons.import }}
           </v-icon>
           <v-toolbar-title class="headline">
             Migration Summary

frontend/src/pages/Admin/Profile/APITokenCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <StatCard icon="mdi-api" color="accent">
+  <StatCard :icon="$globals.icons.api" color="accent">
     <template v-slot:after-heading>
       <div class="ml-auto text-right">
         <h2 class="body-3 grey--text font-weight-light">
@@ -18,7 +18,7 @@
           <v-list-item @click.prevent>
             <v-list-item-avatar>
               <v-icon large dark color="accent">
-                mdi-api
+                {{ $globals.icons.api }}
               </v-icon>
             </v-list-item-avatar>
 
@@ -41,7 +41,7 @@
         <v-spacer></v-spacer>
         <BaseDialog
           :title="$t('settings.token.create-an-api-token')"
-          title-icon="mdi-api"
+          :title-icon="$globals.icons.api"
           @submit="createToken"
           :submit-text="buttonText"
           :loading="loading"
@@ -57,7 +57,7 @@
                 :label="$t('settings.token.api-token')"
                 readonly
                 v-model="createdToken"
-                append-outer-icon="mdi-content-copy"
+                :append-outer-icon="$globals.icons.contentCopy"
                 @click:append-outer="copyToken"
               >
               </v-textarea>

frontend/src/pages/Admin/Profile/ProfileGroupCard.vue

@@ -21,7 +21,7 @@
         />
       </div>
 
-      <v-subheader>{{$t('user.users-header')}}</v-subheader>
+      <v-subheader>{{ $t("user.users-header") }}</v-subheader>
       <v-divider></v-divider>
 
       <v-virtual-scroll v-if="currentGroup.users" :items="currentGroup.users" height="257" item-height="64">
@@ -46,7 +46,7 @@
       <div class="mt-3">
         <h3 class="display-2 font-weight-light text--primary">
           <v-icon x-large>
-            mdi-food-variant
+            {{ $globals.icons.food }}
           </v-icon>
           <small> {{ $t("meal-plan.mealplan-settings") }} </small>
         </h3>
@@ -92,7 +92,7 @@
         <v-card-actions class="pa-0">
           <v-spacer></v-spacer>
           <v-btn small color="success" @click="addWebhook">
-            <v-icon left> mdi-webhook </v-icon>
+            <v-icon left> {{ $globals.icons.webhook }} </v-icon>
             {{ $t("general.new") }}
           </v-btn>
         </v-card-actions>
@@ -101,7 +101,7 @@
       <v-divider></v-divider>
       <v-card-actions class="pb-0">
         <v-btn class="ma-2" color="info" @click="testWebhooks">
-          <v-icon left> mdi-webhook </v-icon>
+          <v-icon left> {{ $globals.icons.webhook }} </v-icon>
           {{ $t("settings.webhooks.test-webhooks") }}
         </v-btn>
         <v-spacer></v-spacer>

frontend/src/pages/Admin/Profile/ProfileThemeCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <StatCard icon="mdi-format-color-fill" :color="color">
+    <StatCard :icon="$globals.icons.formatColorFill" :color="color">
       <template v-slot:after-heading>
         <div class="ml-auto text-right">
           <div class="body-3 grey--text font-weight-light" v-text="$t('general.themes')" />
@@ -14,21 +14,21 @@
       <template v-slot:actions>
         <v-btn-toggle v-model="darkMode" color="primary " mandatory>
           <v-btn small value="system">
-            <v-icon>mdi-desktop-tower-monitor</v-icon>
+            <v-icon>{{ $globals.icons.desktopTowerMonitor }}</v-icon>
             <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
               {{ $t("settings.theme.default-to-system") }}
             </span>
           </v-btn>
 
           <v-btn small value="light">
-            <v-icon>mdi-white-balance-sunny</v-icon>
+            <v-icon>{{ $globals.icons.weatherSunny }}</v-icon>
             <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
               {{ $t("settings.theme.light") }}
             </span>
           </v-btn>
 
           <v-btn small value="dark">
-            <v-icon>mdi-weather-night</v-icon>
+            <v-icon>{{ $globals.icons.weatherNight }}</v-icon>
             <span class="ml-1" v-show="$vuetify.breakpoint.smAndUp">
               {{ $t("settings.theme.dark") }}
             </span>
@@ -43,7 +43,7 @@
             <v-list-item @click="selectedTheme = item">
               <v-list-item-avatar>
                 <v-icon large dark :color="item.colors.primary">
-                  mdi-format-color-fill
+                  {{ $globals.icons.formatColorFill }}
                 </v-icon>
               </v-list-item-avatar>
 
@@ -80,7 +80,7 @@
     <BaseDialog
       :loading="loading"
       :title="modalLabel.title"
-      title-icon="mdi-format-color-fill"
+      :title-icon="$globals.icons.formatColorFill"
       modal-width="700"
       ref="themeDialog"
       :submit-text="modalLabel.button"
@@ -92,7 +92,7 @@
           :label="$t('settings.theme.theme-name')"
           v-model="defaultData.name"
           :rules="[rules.required]"
-          :append-outer-icon="jsonEditor ? 'mdi-form-select' : 'mdi-code-braces'"
+          :append-outer-icon="jsonEditor ? $globals.icons.formSelect : $globals.icons.codeBraces"
           @click:append-outer="jsonEditor = !jsonEditor"
         ></v-text-field>
         <v-row dense dflex wrap justify-content-center v-if="defaultData.colors && !jsonEditor">

frontend/src/pages/Admin/Profile/UserCard.vue

@@ -20,7 +20,7 @@
     <template v-slot:actions>
       <BaseDialog
         :title="$t('user.reset-password')"
-        title-icon="mdi-lock"
+        :title-icon="$globals.icons.lock"
         :submit-text="$t('settings.change-password')"
         @submit="changePassword"
         :loading="loading"
@@ -28,8 +28,8 @@
       >
         <template v-slot:open="{ open }">
           <v-btn color="info" class="mr-1" small @click="open">
-            <v-icon left>mdi-lock</v-icon>
+            <v-icon left>{{ $globals.icons.lock }}</v-icon>
-            {{$t('settings.change-password')}}
+            {{ $t("settings.change-password") }}
           </v-btn>
         </template>
 
@@ -37,7 +37,7 @@
           <v-form ref="passChange">
             <v-text-field
               v-model="password.current"
-              prepend-icon="mdi-lock"
+              :prepend-icon="$globals.icons.lock"
               :label="$t('user.current-password')"
               :rules="[existsRule]"
               validate-on-blur
@@ -46,7 +46,7 @@
             ></v-text-field>
             <v-text-field
               v-model="password.newOne"
-              prepend-icon="mdi-lock"
+              :prepend-icon="$globals.icons.lock"
               :label="$t('user.new-password')"
               :rules="[minRule]"
               :type="showPassword ? 'text' : 'password'"
@@ -54,7 +54,7 @@
             ></v-text-field>
             <v-text-field
               v-model="password.newTwo"
-              prepend-icon="mdi-lock"
+              :prepend-icon="$globals.icons.lock"
               :label="$t('user.confirm-password')"
               :rules="[password.newOne === password.newTwo || $t('user.password-must-match')]"
               validate-on-blur
@@ -91,7 +91,7 @@
       <v-divider></v-divider>
       <v-card-actions class="pb-1 pt-3">
         <TheUploadBtn
-          icon="mdi-image-area"
+          :icon="$globals.icons.fileImage"
           :text="$t('user.upload-photo')"
           :url="userProfileImage"
           file-name="profile_image"

frontend/src/pages/Admin/Settings/CreatePageDialog.vue

@@ -3,7 +3,7 @@
     <v-card>
       <v-app-bar dark dense color="primary">
         <v-icon left>
-          mdi-page-layout-body
+          {{ $globals.icons.pageLayoutBody }}
         </v-icon>
 
         <v-toolbar-title class="headline">

frontend/src/pages/Admin/Settings/HomePageSettings.vue

@@ -28,7 +28,7 @@
           <v-card outlined min-height="350px">
             <v-app-bar dark dense color="primary">
               <v-icon left>
-                mdi-home
+                {{ $globals.icons.home }}
               </v-icon>
 
               <v-toolbar-title class="headline">
@@ -48,7 +48,7 @@
                 >
                   <v-list-item v-for="(item, index) in settings.categories" :key="`${item.name}-${index}`">
                     <v-list-item-icon>
-                      <v-icon>mdi-menu</v-icon>
+                      <v-icon> {{ $globals.icons.menu }}</v-icon>
                     </v-list-item-icon>
 
                     <v-list-item-content>
@@ -88,7 +88,7 @@
                 >
                   <v-list-item v-for="(item, index) in allCategories" :key="`${item.name}-${index}`">
                     <v-list-item-icon>
-                      <v-icon>mdi-menu</v-icon>
+                      <v-icon>{{ $globals.icons.menu }}</v-icon>
                     </v-list-item-icon>
 
                     <v-list-item-content>
@@ -114,7 +114,7 @@
         <v-col cols="12" md="3" sm="12">
           <v-select
             dense
-            prepend-icon="mdi-calendar-week-begin"
+            :prepend-icon="$globals.icons.calendarWeekBegin"
             v-model="settings.firstDayOfWeek"
             :items="allDays"
             item-text="name"

frontend/src/pages/Admin/Settings/index.vue

@@ -6,7 +6,7 @@
       <span>
         <v-btn class="pt-1" text href="/docs">
           {{ $t("settings.local-api") }}
-          <v-icon right>mdi-open-in-new</v-icon>
+          <v-icon right>{{ $globals.icons.openInNew }}</v-icon>
         </v-btn>
       </span>
     </v-card-title>

frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue

@@ -61,7 +61,7 @@
           hide-details
           single-line
           :placeholder="$t('search.search')"
-          prepend-inner-icon="mdi-magnify"
+          :prepend-inner-icon="$globals.icons.search"
         >
         </v-text-field>
       </fuse-search-bar>

frontend/src/pages/Admin/ToolBox/EventNotification.vue

@@ -5,7 +5,7 @@
         <v-spacer></v-spacer>
         <BaseDialog
           :keep-open="keepDialogOpen"
-          title-icon="mdi-bell-alert"
+          :title-icon="$globals.icons.bellAlert"
           :title="$t('general.new') + ' ' + $t('events.notification')"
           @submit="createNotification"
         >
@@ -46,7 +46,7 @@
                 >
                 </v-text-field>
                 <v-btn class="d-flex ml-auto" small color="info" @click="testByURL(newNotification.notificationUrl)">
-                  <v-icon left> mdi-test-tube</v-icon>
+                  <v-icon left> {{ $globals.icons.testTube }}</v-icon>
                   {{ $t("general.test") }}
                 </v-btn>
                 <v-subheader class="pa-0 mb-0">
@@ -85,13 +85,13 @@
               v-else-if="item[boolHeader.value] === true || item[boolHeader.value] === false"
               :color="item[boolHeader.value] ? 'success' : 'gray'"
             >
-              {{ item[boolHeader.value] ? "mdi-check" : "mdi-close" }}
+              {{ item[boolHeader.value] ? $globals.icons.check : $globals.icons.close }}
             </v-icon>
             <div v-else-if="boolHeader.text === 'Actions'">
               <TheButton class="mr-1" delete x-small minor @click="deleteNotification(item.id)" />
               <TheButton edit x-small @click="testByID(item.id)">
                 <template v-slot:icon>
-                  mdi-test-tube
+                  {{ $globals.icons.testTube }}
                 </template>
                 {{ $t("general.test") }}
               </TheButton>
@@ -136,7 +136,7 @@ export default {
       notificationTypes: [
         {
           text: "General",
-          icon: "mdi-bell-alert",
+          icon: this.$globals.icons.bellAlert,
         },
         {
           text: "Discord",

frontend/src/pages/Admin/ToolBox/index.vue

@@ -6,7 +6,7 @@
 
         <v-tab href="#event-notifications">
           {{ $t("settings.notify") }}
-          <v-icon>mdi-bell-alert</v-icon>
+          <v-icon>{{ $globals.icons.bellAlert }}</v-icon>
         </v-tab>
         <v-tab href="#category-editor">
           {{ $t("recipe.categories") }}
@@ -19,7 +19,7 @@
         </v-tab>
         <v-tab href="#organize">
           {{ $t("settings.organize") }}
-          <v-icon>mdi-broom</v-icon>
+          <v-icon>{{ $globals.icons.broom }}</v-icon>
         </v-tab>
       </v-tabs>
 

frontend/src/pages/HomePage.vue

@@ -1,7 +1,7 @@
 <template>
   <v-container>
     <CardSection
-      title-icon="mdi-test"
+      title-icon="mdi-none"
       v-if="siteSettings.showRecent"
       :title="$t('page.recent')"
       :recipes="recentRecipes"

frontend/src/pages/MealPlan/Planner.vue

@@ -20,7 +20,7 @@
           <v-card-actions class="mb-0 px-2 py-0">
             <v-btn text small v-if="!mealplan.shoppingList" color="info" @click="createShoppingList(mealplan.uid)">
               <v-icon left small>
-                mdi-cart-check
+                {{ $globals.icons.mdiCartCheck }}
               </v-icon>
               {{ $t("shopping-list.create-shopping-list") }}
             </v-btn>
@@ -33,7 +33,7 @@
               :to="{ path: '/shopping-list', query: { list: mealplan.shoppingList } }"
             >
               <v-icon left small>
-                mdi-cart-check
+                {{ $globals.icons.mdiCartCheck }}
               </v-icon>
               {{ $t("shopping-list.shopping-list") }}
             </v-btn>

frontend/src/pages/Recipe/ScraperDebugger.vue

@@ -3,7 +3,7 @@
     <v-text-field v-model="testUrl" outlined single-line label="Recipe Url"> </v-text-field>
     <div class="d-flex">
       <v-btn class="mt-0 ml-auto" color="info" @click="getTestData">
-        <v-icon left> mdi-test-tube </v-icon>
+        <v-icon left> {{ $globals.icons.testTube}} </v-icon>
         Test Scrape
       </v-btn>
     </div>

frontend/src/pages/SearchPage/index.vue

@@ -7,7 +7,7 @@
           outlined
           color="primary accent-3"
           :placeholder="$t('search.search-placeholder')"
-          append-icon="mdi-magnify"
+          :append-icon="$globals.icons.search"
         >
         </v-text-field>
       </v-col>
@@ -39,7 +39,13 @@
       </v-col>
     </v-row>
 
-    <CardSection class="mt-n9" title-icon="mdi-mag" :recipes="showRecipes" :hardLimit="maxResults" @sort="assignFuzzy" />
+    <CardSection
+      class="mt-n9"
+      :title-icon="$globals.icons.magnify"
+      :recipes="showRecipes"
+      :hardLimit="maxResults"
+      @sort="assignFuzzy"
+    />
   </v-container>
 </template>
 

frontend/src/pages/ShoppingList/index.vue

@@ -3,18 +3,18 @@
     <v-app-bar color="transparent" flat class="mt-n1 rounded">
       <v-btn v-if="list" color="info" @click="list = null">
         <v-icon left>
-          mdi-arrow-left-bold
+          {{ $globals.icons.arrowLeftBold }}
         </v-icon>
         {{ $t("shopping-list.all-lists") }}
       </v-btn>
       <v-icon v-if="!list" large left>
-        mdi-format-list-checks
+        {{ $globals.icons.formatListChecks }}
       </v-icon>
       <v-toolbar-title v-if="!list" class="headline"> {{ $t("shopping-list.shopping-lists") }} </v-toolbar-title>
       <v-spacer></v-spacer>
       <BaseDialog
         :title="$t('shopping-list.new-list')"
-        title-icon="mdi-format-list-checks"
+        :title-icon="$globals.icons.formatListChecks"
         :submit-text="$t('general.create')"
         @submit="createNewList"
       >
@@ -40,7 +40,7 @@
               <v-spacer></v-spacer>
               <v-btn color="info" @click="list = item.id">
                 <v-icon left>
-                  mdi-cart-check
+                  {{ $globals.icons.cartCheck }}
                 </v-icon>
                 {{ $t("general.view") }}
               </v-btn>
@@ -70,7 +70,7 @@
               <div v-if="edit">
                 <v-btn x-small text class="ml-1" @click="activeList.items[index].quantity -= 1">
                   <v-icon>
-                    mdi-minus
+                    {{ $globals.icons.mdiMinus }}
                   </v-icon>
                 </v-btn>
                 <v-btn x-small text class="mr-1" @click="activeList.items[index].quantity += 1">
@@ -98,7 +98,7 @@
               <p v-if="!edit" class="mb-0">{{ item.quantity }}</p>
 
               <v-icon v-if="!edit" x-small class="mx-3">
-                mdi-window-close
+                {{ $globals.icons.windowClose }}
               </v-icon>
 
               <v-lazy>

frontend/src/plugins/vuetify.js

@@ -55,6 +55,9 @@ const vuetify = new Vuetify({
     },
     current: "en-US",
   },
+  icons: {
+    iconfont: "mdiSvg",
+  },
 });
 
 export default vuetify;

frontend/src/utils/globals.js

@@ -1,23 +1,201 @@
+import {
+  mdiAccount,
+  mdiSilverwareVariant,
+  mdiPlus,
+  mdiPlusCircle,
+  mdiDelete,
+  mdiContentSave,
+  mdiContentSaveEdit,
+  mdiSquareEditOutline,
+  mdiClose,
+  mdiTagMultipleOutline,
+  mdiBookOutline,
+  mdiAccountCog,
+  mdiAccountGroup,
+  mdiHome,
+  mdiMagnify,
+  mdiTranslate,
+  mdiClockTimeFourOutline,
+  mdiImport,
+  mdiEmail,
+  mdiLock,
+  mdiEye,
+  mdiEyeOff,
+  mdiCalendarMinus,
+  mdiCalendar,
+  mdiDiceMultiple,
+  mdiAlertCircle,
+  mdiDotsVertical,
+  mdiPrinter,
+  mdiShareVariant,
+  mdiHeart,
+  mdiHeartOutline,
+  mdiDotsHorizontal,
+  mdiCheckboxBlankOutline,
+  mdiCommentTextMultipleOutline,
+  mdiDownload,
+  mdiFile,
+  mdiFilePdfBox,
+  mdiFileImage,
+  mdiCodeJson,
+  mdiArrowUpDown,
+  mdiCog,
+  mdiSort,
+  mdiOrderAlphabeticalAscending,
+  mdiStar,
+  mdiNewBox,
+  mdiShuffleVariant,
+  mdiAlert,
+  mdiCheckboxMarkedCircle,
+  mdiInformation,
+  mdiBellAlert,
+  mdiRefreshCircle,
+  mdiMenu,
+  mdiWeatherSunny,
+  mdiWeatherNight,
+  mdiLink,
+  mdiRobot,
+  mdiLinkVariant,
+  mdiViewModule,
+  mdiViewDashboard,
+  mdiTools,
+  mdiCalendarWeek,
+  mdiCalendarToday,
+  mdiCalendarMultiselect,
+  mdiFormatListChecks,
+  mdiLogout,
+  mdiContentCopy,
+  mdiClipboardCheck,
+  mdiCloudUpload,
+  mdiDatabase,
+  mdiGithub,
+  mdiFolderOutline,
+  mdiApi,
+  mdiTestTube,
+  mdiDevTo,
+  mdiBackupRestore,
+  mdiNotificationClearAll,
+  mdiFood,
+  mdiWebhook,
+  mdiFilter,
+  mdiAccountPlusOutline,
+  mdiDesktopTowerMonitor,
+  mdiFormatColorFill,
+  mdiFormSelect,
+  mdiPageLayoutBody,
+  mdiCalendarWeekBegin,
+  mdiOpenInNew,
+  mdiCheck,
+  mdiBroom,
+  mdiCartCheck,
+  mdiArrowLeftBold,
+  mdiMinus,
+  mdiWindowClose,
+} from "@mdi/js";
+
 const icons = {
-  primary: "mdi-silverware-variant",
+  // Primary
+  primary: mdiSilverwareVariant,
+
+  // General
+  alert: mdiAlert,
+  alertCircle: mdiAlertCircle,
+  api: mdiApi,
+  arrowLeftBold: mdiArrowLeftBold,
+  arrowUpDown: mdiArrowUpDown,
+  backupRestore: mdiBackupRestore,
+  bellAlert: mdiBellAlert,
+  broom: mdiBroom,
+  calendar: mdiCalendar,
+  calendarMinus: mdiCalendarMinus,
+  calendarMultiselect: mdiCalendarMultiselect,
+  calendarToday: mdiCalendarToday,
+  calendarWeek: mdiCalendarWeek,
+  calendarWeekBegin: mdiCalendarWeekBegin,
+  cartCheck: mdiCartCheck,
+  check: mdiCheck,
+  checkboxBlankOutline: mdiCheckboxBlankOutline,
+  checkboxMarkedCircle: mdiCheckboxMarkedCircle,
+  clipboardCheck: mdiClipboardCheck,
+  clockOutline: mdiClockTimeFourOutline,
+  codeBraces: mdiCodeJson,
+  codeJson: mdiCodeJson,
+  cog: mdiCog,
+  commentTextMultipleOutline: mdiCommentTextMultipleOutline,
+  contentCopy: mdiContentCopy,
+  database: mdiDatabase,
+  desktopTowerMonitor: mdiDesktopTowerMonitor,
+  devTo: mdiDevTo,
+  diceMultiple: mdiDiceMultiple,
+  dotsHorizontal: mdiDotsHorizontal,
+  dotsVertical: mdiDotsVertical,
+  download: mdiDownload,
+  email: mdiEmail,
+  externalLink: mdiLinkVariant,
+  eye: mdiEye,
+  eyeOff: mdiEyeOff,
+  file: mdiFile,
+  fileImage: mdiFileImage,
+  filePDF: mdiFilePdfBox,
+  filter: mdiFilter,
+  folderOutline: mdiFolderOutline,
+  food: mdiFood,
+  formatColorFill: mdiFormatColorFill,
+  formatListCheck: mdiFormatListChecks,
+  formSelect: mdiFormSelect,
+  github: mdiGithub,
+  heart: mdiHeart,
+  heartOutline: mdiHeartOutline,
+  home: mdiHome,
+  import: mdiImport,
+  information: mdiInformation,
+  link: mdiLink,
+  lock: mdiLock,
+  logout: mdiLogout,
+  menu: mdiMenu,
+  newBox: mdiNewBox,
+  notificationClearAll: mdiNotificationClearAll,
+  openInNew: mdiOpenInNew,
+  orderAlphabeticalAscending: mdiOrderAlphabeticalAscending,
+  pageLayoutBody: mdiPageLayoutBody,
+  printer: mdiPrinter,
+  refreshCircle: mdiRefreshCircle,
+  robot: mdiRobot,
+  search: mdiMagnify,
+  shareVariant: mdiShareVariant,
+  shuffleVariant: mdiShuffleVariant,
+  sort: mdiSort,
+  star: mdiStar,
+  testTube: mdiTestTube,
+  tools: mdiTools,
+  translate: mdiTranslate,
+  upload: mdiCloudUpload,
+  viewDashboard: mdiViewDashboard,
+  viewModule: mdiViewModule,
+  weatherNight: mdiWeatherNight,
+  weatherSunny: mdiWeatherSunny,
+  webhook: mdiWebhook,
+  windowClose: mdiWindowClose,
 
   // Crud
-  createAlt: "mdi-plus",
+  createAlt: mdiPlus,
-  create: "mdi-plus-circle",
+  create: mdiPlusCircle,
-  delete: "mdi-delete",
+  delete: mdiDelete,
-  save: "mdi-content-save",
+  save: mdiContentSave,
-  update: "mdi-content-save-edit",
+  update: mdiContentSaveEdit,
-  edit: "mdi-square-edit-outline",
+  edit: mdiSquareEditOutline,
-  close: "mdi-close",
+  close: mdiClose,
+  minus: mdiMinus,
 
   // Organization
-  tags: "mdi-tag-multiple-outline",
+  tags: mdiTagMultipleOutline,
-  pages: "mdi-book-outline",
+  pages: mdiBookOutline,
 
   // Admin
-  user: "mdi-account",
+  user: mdiAccount,
-  admin: "mdi-admin",
+  admin: mdiAccountCog,
-  group: "mdi-account-group",
+  group: mdiAccountGroup,
+  accountPlusOutline: mdiAccountPlusOutline,
 };
 
 export const globals = {

frontend/vue.config.js

@@ -19,6 +19,9 @@ module.exports = {
       localeDir: "locales",
       enableInSFC: true,
     },
+    webpackBundleAnalyzer: {
+      openAnalyzer: process.env.PREVIEW_BUNDLE,
+    },
   },
   configureWebpack: {
     resolve: {