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>
2025-11-16 00:42:32 -05:00 · 2021-06-16 18:55:32 -08:00
parent d475818a9f
commit ee1a11ea57
65 changed files with 588 additions and 248 deletions
--- 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,