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>
2021-06-16 18:55:32 -08:00 · 2021-06-16 18:55:32 -08:00 · ee1a11ea57
commit ee1a11ea57
parent d475818a9f
65 changed files with 588 additions and 248 deletions
--- a/frontend/.env.development
+++ b/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
--- a/frontend/package-lock.json
+++ b/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",
--- a/frontend/package.json
+++ b/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"
  },
--- a/frontend/src/components/Fallbacks/The404.vue
+++ b/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" },
      ],
    };
  },
--- a/frontend/src/components/FormHelpers/LanguageSelector.vue
+++ b/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"
  >
--- a/frontend/src/components/FormHelpers/TimePickerDialog.vue
+++ b/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"
--- a/frontend/src/components/ImportSummaryDialog/index.vue
+++ b/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") }}
--- a/frontend/src/components/Login/LoginForm.vue
+++ b/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>
--- a/frontend/src/components/Login/SignUpForm.vue
+++ b/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>
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/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>
--- a/frontend/src/components/Recipe/CommentSection/index.vue
+++ b/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>
--- a/frontend/src/components/Recipe/ContextMenu.vue
+++ b/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",
        },
--- a/frontend/src/components/Recipe/FavoriteBadge.vue
+++ b/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>
--- a/frontend/src/components/Recipe/MobileRecipeCard.vue
+++ b/frontend/src/components/Recipe/MobileRecipeCard.vue
@ -34,11 +34,7 @@
              :value="rating"
            ></v-rating>
            <v-spacer></v-spacer>
-            <ContextMenu
-                :slug="slug"
-                menu-icon="mdi-dots-horizontal"
-                :name="name"
-            />
+            <ContextMenu :slug="slug" :menu-icon="$globals.icons.dotsHorizontal" :name="name" />
          </div>
        </v-list-item-content>
      </v-list-item>
--- a/frontend/src/components/Recipe/Parts/Assets.vue
+++ b/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>
--- a/frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue
+++ b/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>
--- a/frontend/src/components/Recipe/Parts/Helpers/SettingsMenu.vue
+++ b/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>
--- a/frontend/src/components/Recipe/Parts/Ingredients.vue
+++ b/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 }}
--- a/frontend/src/components/Recipe/PrintView.vue
+++ b/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>
--- a/frontend/src/components/Recipe/RecipePageActionMenu.vue
+++ b/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() {
-        return [
-          {
-            text: this.$t('general.delete'),
-            icon: this.$globals.icons.delete,
-            event: DELETE_EVENT,
-            color: "error",
-          },
-          {
-            text: this.$t('general.json'),
-            icon: "mdi-code-braces",
-            event: JSON_EVENT,
-            color: "accent",
-          },
-          {
-            text: this.$t('general.close'),
-            icon: "mdi-close",
-            event: CLOSE_EVENT,
-            color: "",
-          },
-          {
-            text: this.$t('general.save'),
-            icon: this.$globals.icons.save,
-            event: SAVE_EVENT,
-            color: "success",
-          },
-        ]; 
-      },
+    editorButtons() {
+      return [
+        {
+          text: this.$t("general.delete"),
+          icon: this.$globals.icons.delete,
+          event: DELETE_EVENT,
+          color: "error",
+        },
+        {
+          text: this.$t("general.json"),
+          icon: this.$globals.icons.codeBraces,
+          event: JSON_EVENT,
+          color: "accent",
+        },
+        {
+          text: this.$t("general.close"),
+          icon: this.$globals.icons.close,
+          event: CLOSE_EVENT,
+          color: "",
+        },
+        {
+          text: this.$t("general.save"),
+          icon: this.$globals.icons.save,
+          event: SAVE_EVENT,
+          color: "success",
+        },
+      ];
+    },
  },
  methods: {
    emitHandler(event) {
--- a/frontend/src/components/Recipe/RecipeTimeCard.vue
+++ b/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 }}
--- a/frontend/src/components/UI/Buttons/TheCopyButton.vue
+++ b/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>
--- a/frontend/src/components/UI/Buttons/TheUploadBtn.vue
+++ b/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");
    },
--- a/frontend/src/components/UI/CardSection.vue
+++ b/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>
--- a/frontend/src/components/UI/Dialogs/BackupDialog.vue
+++ b/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"
--- a/frontend/src/components/UI/Dialogs/ImportDialog.vue
+++ b/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>
--- a/frontend/src/components/UI/Dialogs/SearchDialog.vue
+++ b/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" />
--- a/frontend/src/components/UI/GlobalSnackbar.vue
+++ b/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;
      }
    },
  },
--- a/frontend/src/components/UI/LogCard.vue
+++ b/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>
--- a/frontend/src/components/UI/Search/SearchBar.vue
+++ b/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>
--- a/frontend/src/components/UI/Search/SearchDialog.vue
+++ b/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>
--- a/frontend/src/components/UI/TheAppBar.vue
+++ b/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>
--- a/frontend/src/components/UI/TheRecipeFab.vue
+++ b/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>
--- a/frontend/src/components/UI/TheSidebar.vue
+++ b/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"),
        },
--- a/frontend/src/components/UI/TheSiteMenu.vue
+++ b/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",
-          title: this.$t('shopping-list.shopping-lists'),
+          icon: this.$globals.icons.formatListCheck,
+          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,
--- a/frontend/src/main.js
+++ b/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";

--- a/frontend/src/pages/Admin/About/index.vue
+++ b/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,
        },
        {
--- a/frontend/src/pages/Admin/Dashboard/BackupViewer.vue
+++ b/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>

--- a/frontend/src/pages/Admin/Dashboard/EventViewer.vue
+++ b/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: {
--- a/frontend/src/pages/Admin/Dashboard/index.vue
+++ b/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">
--- a/frontend/src/pages/Admin/ManageUsers/GroupCard.vue
+++ b/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,
        },
      ];
--- a/frontend/src/pages/Admin/ManageUsers/GroupDashboard.vue
+++ b/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
--- a/frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue
+++ b/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>
--- a/frontend/src/pages/Admin/ManageUsers/TheUserTable.vue
+++ b/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>
--- a/frontend/src/pages/Admin/ManageUsers/index.vue
+++ b/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">
--- a/frontend/src/pages/Admin/Migration/MigrationCard.vue
+++ b/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">
--- a/frontend/src/pages/Admin/Migration/MigrationDialog.vue
+++ b/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
--- a/frontend/src/pages/Admin/Profile/APITokenCard.vue
+++ b/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>
--- a/frontend/src/pages/Admin/Profile/ProfileGroupCard.vue
+++ b/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>
--- a/frontend/src/pages/Admin/Profile/ProfileThemeCard.vue
+++ b/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">
--- a/frontend/src/pages/Admin/Profile/UserCard.vue
+++ b/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>
-            {{$t('settings.change-password')}}
+            <v-icon left>{{ $globals.icons.lock }}</v-icon>
+            {{ $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"
--- a/frontend/src/pages/Admin/Settings/CreatePageDialog.vue
+++ b/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">
--- a/frontend/src/pages/Admin/Settings/HomePageSettings.vue
+++ b/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"
--- a/frontend/src/pages/Admin/Settings/index.vue
+++ b/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>
--- a/frontend/src/pages/Admin/ToolBox/CategoryTagEditor/index.vue
+++ b/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>
--- a/frontend/src/pages/Admin/ToolBox/EventNotification.vue
+++ b/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",
--- a/frontend/src/pages/Admin/ToolBox/index.vue
+++ b/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>

--- a/frontend/src/pages/HomePage.vue
+++ b/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"
--- a/frontend/src/pages/MealPlan/Planner.vue
+++ b/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>
--- a/frontend/src/pages/Recipe/ScraperDebugger.vue
+++ b/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>
--- a/frontend/src/pages/SearchPage/index.vue
+++ b/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>

--- a/frontend/src/pages/ShoppingList/index.vue
+++ b/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>
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@ -55,6 +55,9 @@ const vuetify = new Vuetify({
    },
    current: "en-US",
  },
+  icons: {
+    iconfont: "mdiSvg",
+  },
 });

 export default vuetify;
--- a/frontend/src/utils/globals.js
+++ b/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",
-  create: "mdi-plus-circle",
-  delete: "mdi-delete",
-  save: "mdi-content-save",
-  update: "mdi-content-save-edit",
-  edit: "mdi-square-edit-outline",
-  close: "mdi-close",
+  createAlt: mdiPlus,
+  create: mdiPlusCircle,
+  delete: mdiDelete,
+  save: mdiContentSave,
+  update: mdiContentSaveEdit,
+  edit: mdiSquareEditOutline,
+  close: mdiClose,
+  minus: mdiMinus,

  // Organization
-  tags: "mdi-tag-multiple-outline",
-  pages: "mdi-book-outline",
+  tags: mdiTagMultipleOutline,
+  pages: mdiBookOutline,

  // Admin
-  user: "mdi-account",
-  admin: "mdi-admin",
-  group: "mdi-account-group",
+  user: mdiAccount,
+  admin: mdiAccountCog,
+  group: mdiAccountGroup,
+  accountPlusOutline: mdiAccountPlusOutline,
 };

 export const globals = {
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@ -19,6 +19,9 @@ module.exports = {
      localeDir: "locales",
      enableInSFC: true,
    },
+    webpackBundleAnalyzer: {
+      openAnalyzer: process.env.PREVIEW_BUNDLE,
+    },
  },
  configureWebpack: {
    resolve: {