From 95205d2f1d5e104d6475f93e99fba9604f4c1b3f Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Thu, 6 Feb 2025 23:29:08 +0800
Subject: [PATCH] code refactor

---
 src/components/desktop/ColorSelect.vue        |  13 +-
 src/components/desktop/IconSelect.vue         |   6 +-
 src/components/desktop/ItemIcon.vue           |   6 +-
 src/views/desktop/ExchangeRatesPage.vue       |   9 +-
 src/views/desktop/ForgetPasswordPage.vue      |   6 +-
 src/views/desktop/HomePage.vue                |  44 ++----
 src/views/desktop/LoginPage.vue               |   9 +-
 src/views/desktop/MainLayout.vue              |  65 +++------
 src/views/desktop/ResetPasswordPage.vue       |   6 +-
 src/views/desktop/SignupPage.vue              |  14 +-
 src/views/desktop/VerifyEmailPage.vue         |   6 +-
 src/views/desktop/accounts/ListPage.vue       |  43 ++----
 .../accounts/list/dialogs/EditDialog.vue      |  12 +-
 src/views/desktop/app/AppSettingsPage.vue     |  12 +-
 src/views/desktop/categories/ListPage.vue     |  29 ++--
 .../cards/AccountFilterSettingsCard.vue       |  33 ++---
 .../cards/CategoryFilterSettingsCard.vue      |  33 ++---
 .../TransactionTagFilterSettingsCard.vue      |  43 +++---
 .../cards/IncomeExpenseOverviewCard.vue       |   6 +-
 .../desktop/statistics/TransactionPage.vue    |  41 ++----
 src/views/desktop/tags/ListPage.vue           |  55 +++-----
 src/views/desktop/templates/ListPage.vue      |  40 ++----
 .../list/dialogs/BatchReplaceDialog.vue       |   8 +-
 .../transactions/list/dialogs/EditDialog.vue  |  35 ++---
 .../list/dialogs/ImportDialog.vue             | 131 ++++++++----------
 src/views/desktop/user/UserSettingsPage.vue   |  15 +-
 .../settings/tabs/UserBasicSettingTab.vue     |  11 +-
 .../tabs/UserDataManagementSettingTab.vue     |  30 ++--
 .../settings/tabs/UserSecuritySettingTab.vue  |   6 +-
 .../tabs/UserTwoFactorAuthSettingTab.vue      |   6 +-
 30 files changed, 253 insertions(+), 520 deletions(-)

diff --git a/src/components/desktop/ColorSelect.vue b/src/components/desktop/ColorSelect.vue
index a58fc3d4..9c1134c9 100644
--- a/src/components/desktop/ColorSelect.vue
+++ b/src/components/desktop/ColorSelect.vue
@@ -11,7 +11,7 @@
     >
         <template #selection="{ item }">
             <v-label class="cursor-pointer" style="padding-top: 3px">
-                <v-icon size="28" :icon="icons.square" :color="getFinalColor(item.raw)"/>
+                <v-icon size="28" :icon="mdiSquareRounded" :color="getFinalColor(item.raw)"/>
             </v-label>
         </template>
 
@@ -23,12 +23,12 @@
                     <div class="text-center" :key="colorInfo.color" v-for="colorInfo in row">
                         <div class="cursor-pointer" @click="color = colorInfo.color">
                             <v-icon class="ma-2" size="28"
-                                    :icon="icons.square" :color="getFinalColor(colorInfo.color)"
+                                    :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)"
                                     v-if="!modelValue || modelValue !== colorInfo.color" />
                             <v-badge class="right-bottom-icon" color="primary"
-                                     location="bottom right" offset-x="8" offset-y="8" :icon="icons.checked"
+                                     location="bottom right" offset-x="8" offset-y="8" :icon="mdiCheck"
                                      v-if="modelValue && modelValue === colorInfo.color">
-                                <v-icon class="ma-2" size="28" :icon="icons.square" :color="getFinalColor(colorInfo.color)" />
+                                <v-icon class="ma-2" size="28" :icon="mdiSquareRounded" :color="getFinalColor(colorInfo.color)" />
                             </v-badge>
                         </div>
                     </div>
@@ -64,11 +64,6 @@ const emit = defineEmits<{
     (e: 'update:modelValue', value: ColorValue): void;
 }>();
 
-const icons = {
-    square: mdiSquareRounded,
-    checked: mdiCheck
-};
-
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 const itemPerRow = ref<number>(props.columnCount || 7);
 
diff --git a/src/components/desktop/IconSelect.vue b/src/components/desktop/IconSelect.vue
index 8eebb25c..472f1e2c 100644
--- a/src/components/desktop/IconSelect.vue
+++ b/src/components/desktop/IconSelect.vue
@@ -24,7 +24,7 @@
                         <div class="cursor-pointer" @click="icon = iconInfo.id">
                             <ItemIcon class="ma-2" icon-type="fixed" :icon-id="iconInfo.icon" :color="color" v-if="!modelValue || modelValue !== iconInfo.id" />
                             <v-badge class="right-bottom-icon" color="primary"
-                                     location="bottom right" offset-x="8" offset-y="10" :icon="icons.checked"
+                                     location="bottom right" offset-x="8" offset-y="10" :icon="mdiCheck"
                                      v-if="modelValue && modelValue === iconInfo.id">
                                 <ItemIcon class="ma-2" icon-type="fixed" :icon-id="iconInfo.icon" :color="color" />
                             </v-badge>
@@ -63,10 +63,6 @@ const emit = defineEmits<{
     (e: 'update:modelValue', value: string): void;
 }>();
 
-const icons = {
-    checked: mdiCheck
-};
-
 const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
 const itemPerRow = ref<number>(props.columnCount || 7);
 
diff --git a/src/components/desktop/ItemIcon.vue b/src/components/desktop/ItemIcon.vue
index c5cc143b..1f25a825 100644
--- a/src/components/desktop/ItemIcon.vue
+++ b/src/components/desktop/ItemIcon.vue
@@ -3,7 +3,7 @@
         <slot></slot>
     </i>
     <v-badge class="right-bottom-icon" color="secondary"
-             location="bottom right" offset-y="4" :icon="icons.hide"
+             location="bottom right" offset-y="4" :icon="mdiEyeOffOutline"
              v-if="hiddenStatus">
         <i class="item-icon" :class="classes" :style="style">
             <slot></slot>
@@ -27,10 +27,6 @@ interface DesktopItemIconProps extends CommonIconProps {
 const props = defineProps<DesktopItemIconProps>();
 const { style, getAccountIcon, getCategoryIcon } = useItemIconBase(props);
 
-const icons = {
-    hide: mdiEyeOffOutline
-};
-
 const classes = computed<string>(() => {
     let allClasses = props.class ? (props.class + ' ') : '';
 
diff --git a/src/views/desktop/ExchangeRatesPage.vue b/src/views/desktop/ExchangeRatesPage.vue
index 71c4e0d8..23460ef6 100644
--- a/src/views/desktop/ExchangeRatesPage.vue
+++ b/src/views/desktop/ExchangeRatesPage.vue
@@ -62,7 +62,7 @@
                                         <div class="title-and-toolbar d-flex align-center">
                                             <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
-                                                <v-icon :icon="icons.menu" size="24" />
+                                                <v-icon :icon="mdiMenu" size="24" />
                                             </v-btn>
                                             <span>{{ tt('Exchange Rates Data') }}</span>
                                             <v-btn density="compact" color="default" variant="text" size="24"
@@ -70,7 +70,7 @@
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
-                                                <v-icon :icon="icons.refresh" size="24" />
+                                                <v-icon :icon="mdiRefresh" size="24" />
                                                 <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                         </div>
@@ -162,11 +162,6 @@ const { baseCurrency, baseAmount, exchangeRatesData, exchangeRatesDataUpdateTime
 
 const exchangeRatesStore = useExchangeRatesStore();
 
-const icons = {
-    refresh: mdiRefresh,
-    menu: mdiMenu
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const activeTab = ref<string>('exchangeRatesPage');
diff --git a/src/views/desktop/ForgetPasswordPage.vue b/src/views/desktop/ForgetPasswordPage.vue
index 75664cf6..36c10777 100644
--- a/src/views/desktop/ForgetPasswordPage.vue
+++ b/src/views/desktop/ForgetPasswordPage.vue
@@ -52,7 +52,7 @@
                                     <v-col cols="12">
                                         <router-link class="d-flex align-center justify-center" to="/login"
                                                      :class="{ 'disabled': requesting }">
-                                            <v-icon :icon="icons.left"/>
+                                            <v-icon :icon="mdiChevronLeft"/>
                                             <span>{{ tt('Back to login page') }}</span>
                                         </router-link>
                                     </v-col>
@@ -136,10 +136,6 @@ const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage }
 const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
 
-const icons = {
-    left: mdiChevronLeft
-};
-
 const version = `v${getVersion()}`;
 
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
diff --git a/src/views/desktop/HomePage.vue b/src/views/desktop/HomePage.vue
index 28558089..b6687b3f 100644
--- a/src/views/desktop/HomePage.vue
+++ b/src/views/desktop/HomePage.vue
@@ -14,7 +14,7 @@
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
-                            <v-icon :icon="icons.refresh" size="24" />
+                            <v-icon :icon="mdiRefresh" size="24" />
                             <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                     </div>
@@ -26,7 +26,7 @@
                         <v-skeleton-loader class="d-inline-block skeleton-no-margin mt-3 pb-1" width="120px" type="text" :loading="true" v-else-if="loadingOverview && (!transactionOverview || !transactionOverview.thisMonth || !transactionOverview.thisMonth.valid)"></v-skeleton-loader>
                         <v-btn class="ml-1" density="compact" color="default" variant="text"
                                :icon="true" @click="showAmountInHomePage = !showAmountInHomePage">
-                            <v-icon :icon="showAmountInHomePage ? icons.eyeSlash : icons.eye" size="20" />
+                            <v-icon :icon="showAmountInHomePage ? mdiEyeOffOutline : mdiEyeOutline" size="20" />
                         </v-btn>
                     </h4>
                     <div class="mt-1 mb-3">
@@ -58,7 +58,7 @@
                             <div class="d-flex align-center">
                                 <div class="me-3">
                                     <v-avatar rounded color="secondary" size="42" class="elevation-1">
-                                        <v-icon size="24" :icon="icons.totalAssets"/>
+                                        <v-icon size="24" :icon="mdiBankOutline"/>
                                     </v-avatar>
                                 </div>
 
@@ -74,7 +74,7 @@
                             <div class="d-flex align-center">
                                 <div class="me-3">
                                     <v-avatar rounded color="expense" size="42" class="elevation-1">
-                                        <v-icon size="24" :icon="icons.totalLiabilities"/>
+                                        <v-icon size="24" :icon="mdiCreditCardOutline"/>
                                     </v-avatar>
                                 </div>
 
@@ -90,7 +90,7 @@
                             <div class="d-flex align-center">
                                 <div class="me-3">
                                     <v-avatar rounded color="primary" size="42" class="elevation-1">
-                                        <v-icon size="24" :icon="icons.netAssets"/>
+                                        <v-icon size="24" :icon="mdiPiggyBankOutline"/>
                                     </v-avatar>
                                 </div>
 
@@ -110,14 +110,14 @@
             <v-row>
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
-                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarToday"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="mdiCalendarTodayOutline"
                         :title="tt('Today')"
                         :expense-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayExpenseAmount(transactionOverview.today) : ''"
                         :income-amount="transactionOverview.today && transactionOverview.today.valid ? getDisplayIncomeAmount(transactionOverview.today) : ''"
                         :datetime="displayDateRange?.today?.displayTime || ''"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.Today.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.Today.type">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -126,14 +126,14 @@
 
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
-                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarWeek"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="mdiCalendarWeekOutline"
                         :title="tt('This Week')"
                         :expense-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayExpenseAmount(transactionOverview.thisWeek) : ''"
                         :income-amount="transactionOverview.thisWeek && transactionOverview.thisWeek.valid ? getDisplayIncomeAmount(transactionOverview.thisWeek) : ''"
                         :datetime="displayDateRange?.thisWeek?.startTime + '-' + displayDateRange?.thisWeek?.endTime"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.ThisWeek.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisWeek.type">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -142,14 +142,14 @@
 
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
-                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarMonth"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="mdiCalendarMonthOutline"
                         :title="tt('This Month')"
                         :expense-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayExpenseAmount(transactionOverview.thisMonth) : ''"
                         :income-amount="transactionOverview.thisMonth && transactionOverview.thisMonth.valid ? getDisplayIncomeAmount(transactionOverview.thisMonth) : ''"
                         :datetime="displayDateRange?.thisMonth?.startTime + '-' + displayDateRange?.thisMonth?.endTime"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.ThisMonth.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisMonth.type">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -158,14 +158,14 @@
 
                 <v-col cols="12" md="6">
                     <income-expense-overview-card
-                        :loading="loadingOverview" :disabled="loadingOverview" :icon="icons.calendarYear"
+                        :loading="loadingOverview" :disabled="loadingOverview" :icon="mdiLayersTripleOutline"
                         :title="tt('This Year')"
                         :expense-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayExpenseAmount(transactionOverview.thisYear) : ''"
                         :income-amount="transactionOverview.thisYear && transactionOverview.thisYear.valid ? getDisplayIncomeAmount(transactionOverview.thisYear) : ''"
                         :datetime="displayDateRange?.thisYear?.displayTime || ''"
                     >
                         <template #menus>
-                            <v-list-item :prepend-icon="icons.viewDetails" :to="'/transaction/list?dateType=' + DateRange.ThisYear.type">
+                            <v-list-item :prepend-icon="mdiListBoxOutline" :to="'/transaction/list?dateType=' + DateRange.ThisYear.type">
                                 <v-list-item-title>{{ tt('View Details') }}</v-list-item-title>
                             </v-list-item>
                         </template>
@@ -217,8 +217,7 @@ import {
     mdiCalendarWeekOutline,
     mdiCalendarMonthOutline,
     mdiLayersTripleOutline,
-    mdiListBoxOutline,
-    mdiDotsVertical
+    mdiListBoxOutline
 } from '@mdi/js';
 
 type SnackBarType = InstanceType<typeof SnackBar>;
@@ -242,21 +241,6 @@ const {
 const accountsStore = useAccountsStore();
 const overviewStore = useOverviewStore();
 
-const icons = {
-    refresh: mdiRefresh,
-    eye: mdiEyeOutline,
-    eyeSlash: mdiEyeOffOutline,
-    totalAssets: mdiBankOutline,
-    totalLiabilities: mdiCreditCardOutline,
-    netAssets: mdiPiggyBankOutline,
-    calendarToday: mdiCalendarTodayOutline,
-    calendarWeek: mdiCalendarWeekOutline,
-    calendarMonth: mdiCalendarMonthOutline,
-    calendarYear: mdiLayersTripleOutline,
-    viewDetails: mdiListBoxOutline,
-    more: mdiDotsVertical
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const loadingOverview = ref<boolean>(true);
diff --git a/src/views/desktop/LoginPage.vue b/src/views/desktop/LoginPage.vue
index c09cfeca..6c89bbfa 100644
--- a/src/views/desktop/LoginPage.vue
+++ b/src/views/desktop/LoginPage.vue
@@ -66,7 +66,7 @@
                                             :disabled="logining || verifying"
                                             :label="tt('Passcode')"
                                             :placeholder="tt('Passcode')"
-                                            :append-inner-icon="icons.backupCode"
+                                            :append-inner-icon="mdiHelpCircleOutline"
                                             v-model="passcode"
                                             @click:append-inner="twoFAVerifyType = 'backupcode'"
                                             @keyup.enter="verify"
@@ -77,7 +77,7 @@
                                             :disabled="logining || verifying"
                                             :label="tt('Backup Code')"
                                             :placeholder="tt('Backup Code')"
-                                            :append-inner-icon="icons.passcode"
+                                            :append-inner-icon="mdiOnepassword"
                                             v-model="backupCode"
                                             @click:append-inner="twoFAVerifyType = 'passcode'"
                                             @keyup.enter="verify"
@@ -217,11 +217,6 @@ const {
     doAfterLogin
 } = useLoginPageBase();
 
-const icons = {
-    passcode: mdiOnepassword,
-    backupCode: mdiHelpCircleOutline
-};
-
 const passwordInput = useTemplateRef<VTextField>('passwordInput');
 const passcodeInput = useTemplateRef<VTextField>('passcodeInput');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index 1f41610e..ec93d867 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/src/views/desktop/MainLayout.vue
@@ -17,7 +17,7 @@
             >
                 <li class="nav-link home-link">
                     <router-link to="/">
-                        <v-icon class="nav-item-icon" :icon="icons.overview"/>
+                        <v-icon class="nav-item-icon" :icon="mdiHomeOutline"/>
                         <span class="nav-item-title">{{ tt('Overview') }}</span>
                     </router-link>
                 </li>
@@ -28,13 +28,13 @@
                 </li>
                 <li class="nav-link">
                     <router-link to="/transaction/list?dateType=7">
-                        <v-icon class="nav-item-icon" :icon="icons.transactions"/>
+                        <v-icon class="nav-item-icon" :icon="mdiListBoxOutline"/>
                         <span class="nav-item-title">{{ tt('Transaction Details') }}</span>
                     </router-link>
                 </li>
                 <li class="nav-link">
                     <router-link to="/statistics/transaction">
-                        <v-icon class="nav-item-icon" :icon="icons.statistics"/>
+                        <v-icon class="nav-item-icon" :icon="mdiChartPieOutline"/>
                         <span class="nav-item-title">{{ tt('Statistics & Analysis') }}</span>
                     </router-link>
                 </li>
@@ -45,31 +45,31 @@
                 </li>
                 <li class="nav-link">
                     <router-link to="/account/list">
-                        <v-icon class="nav-item-icon" :icon="icons.accounts"/>
+                        <v-icon class="nav-item-icon" :icon="mdiCreditCardOutline"/>
                         <span class="nav-item-title">{{ tt('Accounts') }}</span>
                     </router-link>
                 </li>
                 <li class="nav-link">
                     <router-link to="/category/list">
-                        <v-icon class="nav-item-icon" :icon="icons.categories"/>
+                        <v-icon class="nav-item-icon" :icon="mdiViewDashboardOutline"/>
                         <span class="nav-item-title">{{ tt('Transaction Categories') }}</span>
                     </router-link>
                 </li>
                 <li class="nav-link">
                     <router-link to="/tag/list">
-                        <v-icon class="nav-item-icon" :icon="icons.tags"/>
+                        <v-icon class="nav-item-icon" :icon="mdiTagOutline"/>
                         <span class="nav-item-title">{{ tt('Transaction Tags') }}</span>
                     </router-link>
                 </li>
                 <li class="nav-link">
                     <router-link to="/template/list">
-                        <v-icon class="nav-item-icon" :icon="icons.templates"/>
+                        <v-icon class="nav-item-icon" :icon="mdiClipboardTextOutline"/>
                         <span class="nav-item-title">{{ tt('Transaction Templates') }}</span>
                     </router-link>
                 </li>
                 <li class="nav-link" v-if="isUserScheduledTransactionEnabled()">
                     <router-link to="/schedule/list">
-                        <v-icon class="nav-item-icon" :icon="icons.scheduledTransactions"/>
+                        <v-icon class="nav-item-icon" :icon="mdiClipboardTextClockOutline"/>
                         <span class="nav-item-title">{{ tt('Scheduled Transactions') }}</span>
                     </router-link>
                 </li>
@@ -80,19 +80,19 @@
                 </li>
                 <li class="nav-link">
                     <router-link to="/exchange_rates">
-                        <v-icon class="nav-item-icon" :icon="icons.exchangeRates"/>
+                        <v-icon class="nav-item-icon" :icon="mdiSwapHorizontal"/>
                         <span class="nav-item-title">{{ tt('Exchange Rates Data') }}</span>
                     </router-link>
                 </li>
                 <li class="nav-link">
                     <a href="javascript:void(0);" @click="showMobileQrCode = true">
-                        <v-icon class="nav-item-icon" :icon="icons.mobile"/>
+                        <v-icon class="nav-item-icon" :icon="mdiCellphone"/>
                         <span class="nav-item-title">{{ tt('Use on Mobile Device') }}</span>
                     </a>
                 </li>
                 <li class="nav-link">
                     <router-link to="/about">
-                        <v-icon class="nav-item-icon" :icon="icons.about"/>
+                        <v-icon class="nav-item-icon" :icon="mdiInformationOutline"/>
                         <span class="nav-item-title">{{ tt('About') }}</span>
                     </router-link>
                 </li>
@@ -105,7 +105,7 @@
                     <div class="d-flex h-100 align-center">
                         <v-btn class="ms-n3 mr-2 d-lg-none" color="default" variant="text"
                                :icon="true" @click="showVerticalOverlayMenu = true">
-                            <v-icon :icon="icons.menu" size="24" />
+                            <v-icon :icon="mdiMenu" size="24" />
                         </v-btn>
                         <div class="app-logo d-flex align-center gap-x-3 app-title-wrapper" v-if="mdAndDown">
                             <div class="d-flex">
@@ -116,18 +116,18 @@
                         <v-spacer />
                         <v-btn color="primary" variant="text" class="me-2"
                                :icon="true" @click="(currentTheme === 'light' ? currentTheme = 'dark' : (currentTheme === 'dark' ? currentTheme = 'auto' : currentTheme = 'light'))">
-                            <v-icon :icon="(currentTheme === 'light' ? icons.themeLight : (currentTheme === 'dark' ? icons.themeDark : icons.themeAuto))" size="24" />
+                            <v-icon :icon="(currentTheme === 'light' ? mdiWeatherSunny : (currentTheme === 'dark' ? mdiWeatherNight : mdiThemeLightDark))" size="24" />
                         </v-btn>
                         <v-avatar class="cursor-pointer" variant="tonal"
                                   :color="currentUserAvatar ? 'rgba(0,0,0,0)' : 'primary'">
                             <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
                                 <template #placeholder>
                                     <div class="d-flex align-center justify-center fill-height bg-light-primary">
-                                        <v-icon color="primary" :icon="icons.user"/>
+                                        <v-icon color="primary" :icon="mdiAccount"/>
                                     </div>
                                 </template>
                             </v-img>
-                            <v-icon :icon="icons.user" v-else-if="!currentUserAvatar"/>
+                            <v-icon :icon="mdiAccount" v-else-if="!currentUserAvatar"/>
                             <v-menu activator="parent" width="230" location="bottom end" offset="14px">
                                 <v-list>
                                     <v-list-item>
@@ -138,11 +138,11 @@
                                                     <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
                                                         <template #placeholder>
                                                             <div class="d-flex align-center justify-center fill-height bg-light-primary">
-                                                                <v-icon color="primary" :icon="icons.user"/>
+                                                                <v-icon color="primary" :icon="mdiAccount"/>
                                                             </div>
                                                         </template>
                                                     </v-img>
-                                                    <v-icon :icon="icons.user" v-else-if="!currentUserAvatar"/>
+                                                    <v-icon :icon="mdiAccount" v-else-if="!currentUserAvatar"/>
                                                 </v-avatar>
                                             </v-list-item-action>
                                         </template>
@@ -151,19 +151,19 @@
                                         </v-list-item-title>
                                     </v-list-item>
                                     <v-divider class="my-2"/>
-                                    <v-list-item :prepend-icon="icons.profile"
+                                    <v-list-item :prepend-icon="mdiAccountCogOutline"
                                                  :title="tt('User Settings')"
                                                  to="/user/settings"></v-list-item>
-                                    <v-list-item :prepend-icon="icons.settings"
+                                    <v-list-item :prepend-icon="mdiCogOutline"
                                                  :title="tt('Application Settings')"
                                                  to="/app/settings"></v-list-item>
                                     <v-divider class="my-2"/>
-                                    <v-list-item :prepend-icon="icons.lock"
+                                    <v-list-item :prepend-icon="mdiLockOutline"
                                                  :title="tt('Lock Application')"
                                                  v-if="isEnableApplicationLock"
                                                  @click="lock"></v-list-item>
                                     <v-list-item :disabled="logouting"
-                                                 :prepend-icon="icons.logout"
+                                                 :prepend-icon="mdiLogout"
                                                  :title="tt('Log Out')"
                                                  @click="logout"></v-list-item>
                                 </v-list>
@@ -246,29 +246,6 @@ const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 
-const icons = {
-    menu: mdiMenu,
-    overview: mdiHomeOutline,
-    transactions: mdiListBoxOutline,
-    accounts: mdiCreditCardOutline,
-    categories: mdiViewDashboardOutline,
-    tags: mdiTagOutline,
-    templates: mdiClipboardTextOutline,
-    scheduledTransactions: mdiClipboardTextClockOutline,
-    statistics: mdiChartPieOutline,
-    exchangeRates: mdiSwapHorizontal,
-    settings: mdiCogOutline,
-    mobile: mdiCellphone,
-    about: mdiInformationOutline,
-    themeAuto: mdiThemeLightDark,
-    themeLight: mdiWeatherSunny,
-    themeDark: mdiWeatherNight,
-    user: mdiAccount,
-    profile: mdiAccountCogOutline,
-    lock: mdiLockOutline,
-    logout: mdiLogout
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const logouting = ref<boolean>(false);
diff --git a/src/views/desktop/ResetPasswordPage.vue b/src/views/desktop/ResetPasswordPage.vue
index 34708e91..81327522 100644
--- a/src/views/desktop/ResetPasswordPage.vue
+++ b/src/views/desktop/ResetPasswordPage.vue
@@ -77,7 +77,7 @@
                                     <v-col cols="12">
                                         <router-link class="d-flex align-center justify-center" to="/login"
                                                      :class="{ 'disabled': updating }">
-                                            <v-icon :icon="icons.left"/>
+                                            <v-icon :icon="mdiChevronLeft"/>
                                             <span>{{ tt('Back to login page') }}</span>
                                         </router-link>
                                     </v-col>
@@ -168,10 +168,6 @@ const { tt, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguage }
 const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
 
-const icons = {
-    left: mdiChevronLeft
-};
-
 const version = `v${getVersion()}`;
 
 const passwordInput = useTemplateRef<VTextField>('passwordInput');
diff --git a/src/views/desktop/SignupPage.vue b/src/views/desktop/SignupPage.vue
index 4d3ae591..5a863e42 100644
--- a/src/views/desktop/SignupPage.vue
+++ b/src/views/desktop/SignupPage.vue
@@ -207,22 +207,22 @@
                     <div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-5">
                         <v-btn :color="(currentStep === 'basicSetting' || currentStep === 'finalResult') ? 'default' : 'primary'"
                                :disabled="currentStep === 'basicSetting' || currentStep === 'finalResult' || submitting || navigateToHomePage"
-                               :prepend-icon="icons.previous"
+                               :prepend-icon="mdiArrowLeft"
                                @click="switchToPreviousTab">{{ tt('Previous') }}</v-btn>
                         <v-btn :color="(currentStep === 'presetCategories' || currentStep === 'finalResult') ? 'secondary' : 'primary'"
                                :disabled="currentStep === 'presetCategories' || currentStep === 'finalResult' || submitting || navigateToHomePage"
-                               :append-icon="icons.next"
+                               :append-icon="mdiArrowRight"
                                @click="switchToNextTab"
                                v-if="currentStep === 'basicSetting'">{{ tt('Next') }}</v-btn>
                         <v-btn color="teal"
                                :disabled="submitting || navigateToHomePage"
-                               :append-icon="!submitting ? icons.submit : undefined"
+                               :append-icon="!submitting ? mdiCheck : undefined"
                                @click="submit"
                                v-if="currentStep === 'presetCategories'">
                             {{ tt('Submit') }}
                             <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                         </v-btn>
-                        <v-btn :append-icon="icons.next"
+                        <v-btn :append-icon="mdiArrowRight"
                                @click="navigateToLogin"
                                v-if="currentStep === 'finalResult'">{{ tt('Continue') }}</v-btn>
                     </div>
@@ -283,12 +283,6 @@ const {
 
 const rootStore = useRootStore();
 
-const icons = {
-    previous: mdiArrowLeft,
-    next: mdiArrowRight,
-    submit: mdiCheck
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const currentStep = ref<string>('basicSetting');
diff --git a/src/views/desktop/VerifyEmailPage.vue b/src/views/desktop/VerifyEmailPage.vue
index ec0e0d18..76385ea7 100644
--- a/src/views/desktop/VerifyEmailPage.vue
+++ b/src/views/desktop/VerifyEmailPage.vue
@@ -55,7 +55,7 @@
                                     <v-col cols="12">
                                         <router-link class="d-flex align-center justify-center" :to="verified ? '/' : '/login'"
                                                      :class="{ 'disabled': loading || resending }">
-                                            <v-icon :icon="icons.left"/>
+                                            <v-icon :icon="mdiChevronLeft"/>
                                             <span v-if="!verified">{{ tt('Back to login page') }}</span>
                                             <span v-else-if="verified">{{ tt('Back to home page') }}</span>
                                         </router-link>
@@ -150,10 +150,6 @@ const { tt, te, getCurrentLanguageDisplayName, getAllLanguageOptions, setLanguag
 const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
 
-const icons = {
-    left: mdiChevronLeft
-};
-
 const version = `v${getVersion()}`;
 
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
diff --git a/src/views/desktop/accounts/ListPage.vue b/src/views/desktop/accounts/ListPage.vue
index d850d0a7..e4f4f0df 100644
--- a/src/views/desktop/accounts/ListPage.vue
+++ b/src/views/desktop/accounts/ListPage.vue
@@ -52,7 +52,7 @@
                                         <div class="title-and-toolbar d-flex align-center">
                                             <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
-                                                <v-icon :icon="icons.menu" size="24" />
+                                                <v-icon :icon="mdiMenu" size="24" />
                                             </v-btn>
                                             <span>{{ tt('Account List') }}</span>
                                             <v-btn class="ml-3" color="default" variant="outlined"
@@ -65,19 +65,19 @@
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
-                                                <v-icon :icon="icons.refresh" size="24" />
+                                                <v-icon :icon="mdiRefresh" size="24" />
                                                 <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                                    :disabled="loading" :icon="true">
-                                                <v-icon :icon="icons.more" />
+                                                <v-icon :icon="mdiDotsVertical" />
                                                 <v-menu activator="parent">
                                                     <v-list>
-                                                        <v-list-item :prepend-icon="icons.show"
+                                                        <v-list-item :prepend-icon="mdiEyeOutline"
                                                                      :title="tt('Show Hidden Accounts')"
                                                                      v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                                                        <v-list-item :prepend-icon="icons.hide"
+                                                        <v-list-item :prepend-icon="mdiEyeOffOutline"
                                                                      :title="tt('Hide Hidden Accounts')"
                                                                      v-if="showHidden" @click="showHidden = false"></v-list-item>
                                                     </v-list>
@@ -93,7 +93,7 @@
                                         <v-btn class="ml-2" density="compact" color="default" variant="text"
                                                :icon="true" :disabled="loading"
                                                @click="showAccountBalance = !showAccountBalance">
-                                            <v-icon :icon="showAccountBalance ? icons.eyeSlash : icons.eye" size="20" />
+                                            <v-icon :icon="showAccountBalance ? mdiEyeOffOutline : mdiEyeOutline" size="20" />
                                             <v-tooltip activator="parent">{{ showAccountBalance ? tt('Hide Account Balance') : tt('Show Account Balance') }}</v-tooltip>
                                         </v-btn>
                                     </v-card-text>
@@ -103,14 +103,14 @@
                                             <v-card border class="card-title-with-bg account-card mb-8 h-auto">
                                                 <template #title>
                                                     <div class="account-title d-flex align-center">
-                                                        <v-icon class="disabled mr-0" size="28px" :icon="icons.square" />
+                                                        <v-icon class="disabled mr-0" size="28px" :icon="mdiSquareRounded" />
                                                         <span class="account-name text-truncate ml-2">
                                                             <v-skeleton-loader class="skeleton-no-margin my-1"
                                                                                width="120px" type="text" :loading="true"></v-skeleton-loader>
                                                         </span>
                                                         <v-spacer/>
                                                         <span class="align-self-center">
-                                                            <v-icon class="disabled" :icon="icons.drag"/>
+                                                            <v-icon class="disabled" :icon="mdiDrag"/>
                                                         </span>
                                                     </div>
                                                 </template>
@@ -118,7 +118,7 @@
                                                 <v-card-text>
                                                     <div class="d-flex account-toolbar align-center">
                                                         <v-btn class="px-2" density="comfortable" color="default" variant="text"
-                                                               :disabled="true" :prepend-icon="icons.transactions">
+                                                               :disabled="true" :prepend-icon="mdiListBoxOutline">
                                                             {{ tt('Transaction List') }}
                                                         </v-btn>
                                                         <v-spacer/>
@@ -164,7 +164,7 @@
                                                                     <v-spacer/>
                                                                     <span class="align-self-center">
                                                                         <v-icon :class="!loading && activeAccountCategoryVisibleAccountCount > 1 ? 'drag-handle' : 'disabled'"
-                                                                                :icon="icons.drag"/>
+                                                                                :icon="mdiDrag"/>
                                                                         <v-tooltip activator="parent" v-if="!loading && activeAccountCategoryVisibleAccountCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                                                     </span>
                                                                 </div>
@@ -203,28 +203,28 @@
                                                             <v-card-text>
                                                                 <div class="d-flex account-toolbar align-center">
                                                                     <v-btn class="px-2" density="comfortable" color="default" variant="text"
-                                                                           :disabled="loading" :prepend-icon="icons.transactions"
+                                                                           :disabled="loading" :prepend-icon="mdiListBoxOutline"
                                                                            :to="`/transaction/list?accountIds=${accountOrSubAccountId(element)}`">
                                                                         {{ tt('Transaction List') }}
                                                                     </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
                                                                            :disabled="loading"
-                                                                           :prepend-icon="element.hidden ? icons.show : icons.hide"
+                                                                           :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="hide(element, !element.hidden)">
                                                                         {{ element.hidden ? tt('Show') : tt('Hide') }}
                                                                     </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                           :disabled="loading" :prepend-icon="icons.edit"
+                                                                           :disabled="loading" :prepend-icon="mdiPencilOutline"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="edit(element)">
                                                                         {{ tt('Edit') }}
                                                                     </v-btn>
                                                                     <v-btn class="px-2 ml-1" density="comfortable" color="default" variant="text"
                                                                            :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                           :disabled="loading" :prepend-icon="icons.remove"
+                                                                           :disabled="loading" :prepend-icon="mdiDeleteOutline"
                                                                            v-if="!activeSubAccount[element.id]"
                                                                            @click="remove(element)">
                                                                         {{ tt('Delete') }}
@@ -309,21 +309,6 @@ const {
 
 const accountsStore = useAccountsStore();
 
-const icons = {
-    eye: mdiEyeOutline,
-    eyeSlash: mdiEyeOffOutline,
-    refresh: mdiRefresh,
-    square: mdiSquareRounded,
-    menu: mdiMenu,
-    edit: mdiPencilOutline,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    remove: mdiDeleteOutline,
-    transactions: mdiListBoxOutline,
-    drag: mdiDrag,
-    more: mdiDotsVertical
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const editDialog = useTemplateRef<EditDialogType>('editDialog');
diff --git a/src/views/desktop/accounts/list/dialogs/EditDialog.vue b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
index 8c952ec7..9c16d4af 100644
--- a/src/views/desktop/accounts/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/accounts/list/dialogs/EditDialog.vue
@@ -9,10 +9,10 @@
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
                            :disabled="loading || submitting || !!editAccountId || account.type !== AccountType.MultiSubAccounts.type">
-                        <v-icon :icon="icons.more" />
+                        <v-icon :icon="mdiDotsVertical" />
                         <v-menu activator="parent">
                             <v-list>
-                                <v-list-item :prepend-icon="icons.add"
+                                <v-list-item :prepend-icon="mdiCreditCardPlusOutline"
                                              :title="tt('Add Sub-account')"
                                              @click="addSubAccount"></v-list-item>
                             </v-list>
@@ -30,7 +30,7 @@
                             <v-tab :key="idx" :value="idx" v-for="(subAccount, idx) in subAccounts">
                                 <span>{{ tt('Sub Account') + ' #' + (idx + 1) }}</span>
                                 <v-btn class="ml-2" color="error" size="24" variant="text"
-                                       :icon="icons.delete" v-if="!editAccountId"
+                                       :icon="mdiDeleteOutline" v-if="!editAccountId"
                                        @click="removeSubAccount(subAccount)"></v-btn>
                             </v-tab>
                         </template>
@@ -259,12 +259,6 @@ const {
 const userStore = useUserStore();
 const accountsStore = useAccountsStore();
 
-const icons = {
-    more: mdiDotsVertical,
-    add: mdiCreditCardPlusOutline,
-    delete: mdiDeleteOutline
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
diff --git a/src/views/desktop/app/AppSettingsPage.vue b/src/views/desktop/app/AppSettingsPage.vue
index bb5e6f82..7fce8db7 100644
--- a/src/views/desktop/app/AppSettingsPage.vue
+++ b/src/views/desktop/app/AppSettingsPage.vue
@@ -2,15 +2,15 @@
     <div>
         <v-tabs show-arrows v-model="activeTab">
             <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
-                <v-icon size="20" start :icon="icons.basicSetting"/>
+                <v-icon size="20" start :icon="mdiCogOutline"/>
                 {{ tt('Basic') }}
             </v-tab>
             <v-tab value="applicationLockSetting" @click="pushRouter('applicationLockSetting')">
-                <v-icon size="20" start :icon="icons.applicationLockSetting"/>
+                <v-icon size="20" start :icon="mdiLockOpenOutline"/>
                 {{ tt('Application Lock') }}
             </v-tab>
             <v-tab value="statisticsSetting" @click="pushRouter('statisticsSetting')">
-                <v-icon size="20" start :icon="icons.statisticsSetting"/>
+                <v-icon size="20" start :icon="mdiChartPieOutline"/>
                 {{ tt('Statistics') }}
             </v-tab>
         </v-tabs>
@@ -61,12 +61,6 @@ const ALL_TABS: string[] = [
     'statisticsSetting'
 ];
 
-const icons = {
-    basicSetting: mdiCogOutline,
-    applicationLockSetting: mdiLockOpenOutline,
-    statisticsSetting: mdiChartPieOutline
-};
-
 const activeTab = ref<string>((() => {
     let queryActiveTab = props.initTab || 'basicSetting';
 
diff --git a/src/views/desktop/categories/ListPage.vue b/src/views/desktop/categories/ListPage.vue
index a161caec..6e480ae2 100644
--- a/src/views/desktop/categories/ListPage.vue
+++ b/src/views/desktop/categories/ListPage.vue
@@ -37,7 +37,7 @@
                                         <div class="title-and-toolbar d-flex align-center">
                                             <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
-                                                <v-icon :icon="icons.menu" size="24" />
+                                                <v-icon :icon="mdiMenu" size="24" />
                                             </v-btn>
                                             <span>{{ tt('Transaction Categories') }}</span>
                                             <v-btn class="ml-3" color="default" variant="outlined"
@@ -50,19 +50,19 @@
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
-                                                <v-icon :icon="icons.refresh" size="24" />
+                                                <v-icon :icon="mdiRefresh" size="24" />
                                                 <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                                    :disabled="loading || updating" :icon="true">
-                                                <v-icon :icon="icons.more" />
+                                                <v-icon :icon="mdiDotsVertical" />
                                                 <v-menu activator="parent">
                                                     <v-list>
-                                                        <v-list-item :prepend-icon="icons.show"
+                                                        <v-list-item :prepend-icon="mdiEyeOutline"
                                                                      :title="tt('Show Hidden Transaction Categories')"
                                                                      v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                                                        <v-list-item :prepend-icon="icons.hide"
+                                                        <v-list-item :prepend-icon="mdiEyeOffOutline"
                                                                      :title="tt('Hide Hidden Transaction Categories')"
                                                                      v-if="showHidden" @click="showHidden = false"></v-list-item>
                                                     </v-list>
@@ -134,7 +134,7 @@
                                                             <v-btn class="px-2 ml-2" color="default"
                                                                    density="comfortable" variant="text"
                                                                    :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="element.hidden ? icons.show : icons.hide"
+                                                                   :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
                                                                    :loading="categoryHiding[element.id]"
                                                                    :disabled="loading || updating"
                                                                    @click="hide(element, !element.hidden)">
@@ -146,7 +146,7 @@
                                                             <v-btn class="px-2" color="default"
                                                                    density="comfortable" variant="text"
                                                                    :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="icons.edit"
+                                                                   :prepend-icon="mdiPencilOutline"
                                                                    :disabled="loading || updating"
                                                                    @click="edit(element)">
                                                                 {{ tt('Edit') }}
@@ -154,7 +154,7 @@
                                                             <v-btn class="px-2" color="default"
                                                                    density="comfortable" variant="text"
                                                                    :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                                                   :prepend-icon="icons.remove"
+                                                                   :prepend-icon="mdiDeleteOutline"
                                                                    :loading="categoryRemoving[element.id]"
                                                                    :disabled="loading || updating"
                                                                    @click="remove(element)">
@@ -165,7 +165,7 @@
                                                             </v-btn>
                                                             <span class="ml-2">
                                                                 <v-icon :class="!loading && !updating && availableCategoryCount > 1 ? 'drag-handle' : 'disabled'"
-                                                                        :icon="icons.drag"/>
+                                                                        :icon="mdiDrag"/>
                                                                 <v-tooltip activator="parent" v-if="!loading && !updating && availableCategoryCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                                             </span>
                                                         </div>
@@ -235,17 +235,6 @@ const { tt } = useI18n();
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
-const icons = {
-    refresh: mdiRefresh,
-    menu: mdiMenu,
-    edit: mdiPencilOutline,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    remove: mdiDeleteOutline,
-    drag: mdiDrag,
-    more: mdiDotsVertical
-};
-
 const navbar = useTemplateRef<VNavigationDrawer>('navbar');
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
diff --git a/src/views/desktop/common/cards/AccountFilterSettingsCard.vue b/src/views/desktop/common/cards/AccountFilterSettingsCard.vue
index 6f999173..ffa83934 100644
--- a/src/views/desktop/common/cards/AccountFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/AccountFilterSettingsCard.vue
@@ -7,26 +7,26 @@
                 </div>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading || !hasAnyAvailableAccount" :icon="true">
-                    <v-icon :icon="icons.more" />
+                    <v-icon :icon="mdiDotsVertical" />
                     <v-menu activator="parent">
                         <v-list>
-                            <v-list-item :prepend-icon="icons.selectAll"
+                            <v-list-item :prepend-icon="mdiSelectAll"
                                          :title="tt('Select All')"
                                          :disabled="!hasAnyVisibleAccount"
                                          @click="selectAllAccounts"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectNone"
+                            <v-list-item :prepend-icon="mdiSelect"
                                          :title="tt('Select None')"
                                          :disabled="!hasAnyVisibleAccount"
                                          @click="selectNoneAccounts"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectInverse"
+                            <v-list-item :prepend-icon="mdiSelectInverse"
                                          :title="tt('Invert Selection')"
                                          :disabled="!hasAnyVisibleAccount"
                                          @click="selectInvertAccounts"></v-list-item>
                             <v-divider class="my-2"/>
-                            <v-list-item :prepend-icon="icons.show"
+                            <v-list-item :prepend-icon="mdiEyeOutline"
                                          :title="tt('Show Hidden Accounts')"
                                          v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                            <v-list-item :prepend-icon="icons.hide"
+                            <v-list-item :prepend-icon="mdiEyeOffOutline"
                                          :title="tt('Hide Hidden Accounts')"
                                          v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
@@ -38,26 +38,26 @@
                 <v-spacer/>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading" :icon="true">
-                    <v-icon :icon="icons.more" />
+                    <v-icon :icon="mdiDotsVertical" />
                     <v-menu activator="parent">
                         <v-list>
-                            <v-list-item :prepend-icon="icons.selectAll"
+                            <v-list-item :prepend-icon="mdiSelectAll"
                                          :title="tt('Select All')"
                                          :disabled="!hasAnyVisibleAccount"
                                          @click="selectAllAccounts"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectNone"
+                            <v-list-item :prepend-icon="mdiSelect"
                                          :title="tt('Select None')"
                                          :disabled="!hasAnyVisibleAccount"
                                          @click="selectNoneAccounts"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectInverse"
+                            <v-list-item :prepend-icon="mdiSelectInverse"
                                          :title="tt('Invert Selection')"
                                          :disabled="!hasAnyVisibleAccount"
                                          @click="selectInvertAccounts"></v-list-item>
                             <v-divider class="my-2"/>
-                            <v-list-item :prepend-icon="icons.show"
+                            <v-list-item :prepend-icon="mdiEyeOutline"
                                          :title="tt('Show Hidden Accounts')"
                                          v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                            <v-list-item :prepend-icon="icons.hide"
+                            <v-list-item :prepend-icon="mdiEyeOffOutline"
                                          :title="tt('Hide Hidden Accounts')"
                                          v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
@@ -206,15 +206,6 @@ const {
 
 const accountsStore = useAccountsStore();
 
-const icons = {
-    selectAll: mdiSelectAll,
-    selectNone: mdiSelect,
-    selectInverse: mdiSelectInverse,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    more: mdiDotsVertical
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const expandAccountCategories = ref<number[]>(AccountCategory.values().map(category => category.type));
diff --git a/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue b/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
index fd8bdb1f..a3c1afa2 100644
--- a/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/CategoryFilterSettingsCard.vue
@@ -7,26 +7,26 @@
                 </div>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading || !hasAnyAvailableCategory" :icon="true">
-                    <v-icon :icon="icons.more" />
+                    <v-icon :icon="mdiDotsVertical" />
                     <v-menu activator="parent">
                         <v-list>
-                            <v-list-item :prepend-icon="icons.selectAll"
+                            <v-list-item :prepend-icon="mdiSelectAll"
                                          :title="tt('Select All')"
                                          :disabled="!hasAnyVisibleCategory"
                                          @click="selectAllCategories"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectNone"
+                            <v-list-item :prepend-icon="mdiSelect"
                                          :title="tt('Select None')"
                                          :disabled="!hasAnyVisibleCategory"
                                          @click="selectNoneCategories"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectInverse"
+                            <v-list-item :prepend-icon="mdiSelectInverse"
                                          :title="tt('Invert Selection')"
                                          :disabled="!hasAnyVisibleCategory"
                                          @click="selectInvertCategories"></v-list-item>
                             <v-divider class="my-2"/>
-                            <v-list-item :prepend-icon="icons.show"
+                            <v-list-item :prepend-icon="mdiEyeOutline"
                                          :title="tt('Show Hidden Transaction Categories')"
                                          v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                            <v-list-item :prepend-icon="icons.hide"
+                            <v-list-item :prepend-icon="mdiEyeOffOutline"
                                          :title="tt('Hide Hidden Transaction Categories')"
                                          v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
@@ -38,26 +38,26 @@
                 <v-spacer/>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading" :icon="true">
-                    <v-icon :icon="icons.more" />
+                    <v-icon :icon="mdiDotsVertical" />
                     <v-menu activator="parent">
                         <v-list>
-                            <v-list-item :prepend-icon="icons.selectAll"
+                            <v-list-item :prepend-icon="mdiSelectAll"
                                          :title="tt('Select All')"
                                          :disabled="!hasAnyVisibleCategory"
                                          @click="selectAllCategories"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectNone"
+                            <v-list-item :prepend-icon="mdiSelect"
                                          :title="tt('Select None')"
                                          :disabled="!hasAnyVisibleCategory"
                                          @click="selectNoneCategories"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectInverse"
+                            <v-list-item :prepend-icon="mdiSelectInverse"
                                          :title="tt('Invert Selection')"
                                          :disabled="!hasAnyVisibleCategory"
                                          @click="selectInvertCategories"></v-list-item>
                             <v-divider class="my-2"/>
-                            <v-list-item :prepend-icon="icons.show"
+                            <v-list-item :prepend-icon="mdiEyeOutline"
                                          :title="tt('Show Hidden Transaction Categories')"
                                          v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                            <v-list-item :prepend-icon="icons.hide"
+                            <v-list-item :prepend-icon="mdiEyeOffOutline"
                                          :title="tt('Hide Hidden Transaction Categories')"
                                          v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
@@ -206,15 +206,6 @@ const {
 
 const transactionCategoriesStore = useTransactionCategoriesStore();
 
-const icons = {
-    selectAll: mdiSelectAll,
-    selectNone: mdiSelect,
-    selectInverse: mdiSelectInverse,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    more: mdiDotsVertical
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const expandCategoryTypes = ref<CategoryType[]>([
diff --git a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
index 8c005e31..68df0865 100644
--- a/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
+++ b/src/views/desktop/common/cards/TransactionTagFilterSettingsCard.vue
@@ -7,26 +7,26 @@
                 </div>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading || !hasAnyAvailableTag" :icon="true">
-                    <v-icon :icon="icons.more" />
+                    <v-icon :icon="mdiDotsVertical" />
                     <v-menu activator="parent">
                         <v-list>
-                            <v-list-item :prepend-icon="icons.selectAll"
+                            <v-list-item :prepend-icon="mdiSelectAll"
                                          :title="tt('Select All')"
                                          :disabled="!hasAnyVisibleTag"
                                          @click="selectAllTransactionTags"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectNone"
+                            <v-list-item :prepend-icon="mdiSelect"
                                          :title="tt('Select None')"
                                          :disabled="!hasAnyVisibleTag"
                                          @click="selectNoneTransactionTags"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectInverse"
+                            <v-list-item :prepend-icon="mdiSelectInverse"
                                          :title="tt('Invert Selection')"
                                          :disabled="!hasAnyVisibleTag"
                                          @click="selectInvertTransactionTags"></v-list-item>
                             <v-divider class="my-2"/>
-                            <v-list-item :prepend-icon="icons.show"
+                            <v-list-item :prepend-icon="mdiEyeOutline"
                                          :title="tt('Show Hidden Transaction Tags')"
                                          v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                            <v-list-item :prepend-icon="icons.hide"
+                            <v-list-item :prepend-icon="mdiEyeOffOutline"
                                          :title="tt('Hide Hidden Transaction Tags')"
                                          v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
@@ -38,26 +38,26 @@
                 <v-spacer/>
                 <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                        :disabled="loading" :icon="true">
-                    <v-icon :icon="icons.more" />
+                    <v-icon :icon="mdiDotsVertical" />
                     <v-menu activator="parent">
                         <v-list>
-                            <v-list-item :prepend-icon="icons.selectAll"
+                            <v-list-item :prepend-icon="mdiSelectAll"
                                          :title="tt('Select All')"
                                          :disabled="!hasAnyVisibleTag"
                                          @click="selectAllTransactionTags"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectNone"
+                            <v-list-item :prepend-icon="mdiSelect"
                                          :title="tt('Select None')"
                                          :disabled="!hasAnyVisibleTag"
                                          @click="selectNoneTransactionTags"></v-list-item>
-                            <v-list-item :prepend-icon="icons.selectInverse"
+                            <v-list-item :prepend-icon="mdiSelectInverse"
                                          :title="tt('Invert Selection')"
                                          :disabled="!hasAnyVisibleTag"
                                          @click="selectInvertTransactionTags"></v-list-item>
                             <v-divider class="my-2"/>
-                            <v-list-item :prepend-icon="icons.show"
+                            <v-list-item :prepend-icon="mdiEyeOutline"
                                          :title="tt('Show Hidden Transaction Tags')"
                                          v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                            <v-list-item :prepend-icon="icons.hide"
+                            <v-list-item :prepend-icon="mdiEyeOffOutline"
                                          :title="tt('Hide Hidden Transaction Tags')"
                                          v-if="showHidden" @click="showHidden = false"></v-list-item>
                         </v-list>
@@ -80,7 +80,7 @@
                 <v-btn border class="justify-start" :key="filterType.type"
                        :color="tagFilterType === filterType.type ? 'primary' : 'default'"
                        :variant="tagFilterType === filterType.type ? 'tonal' : 'outlined'"
-                       :append-icon="(tagFilterType === filterType.type ? icons.check : undefined)"
+                       :append-icon="(tagFilterType === filterType.type ? mdiCheck : undefined)"
                        v-for="filterType in allTagFilterTypes"
                        @click="tagFilterType = filterType.type">
                     {{ filterType.displayName }}
@@ -102,11 +102,11 @@
                                                     @update:model-value="updateTransactionTagSelected(transactionTag, $event)">
                                             <template #label>
                                                 <v-badge class="right-bottom-icon" color="secondary"
-                                                         location="bottom right" offset-x="2" offset-y="2" :icon="icons.hide"
+                                                         location="bottom right" offset-x="2" offset-y="2" :icon="mdiEyeOffOutline"
                                                          v-if="transactionTag.hidden">
-                                                    <v-icon size="24" :icon="icons.tag"/>
+                                                    <v-icon size="24" :icon="mdiPound"/>
                                                 </v-badge>
-                                                <v-icon size="24" :icon="icons.tag" v-else-if="!transactionTag.hidden"/>
+                                                <v-icon size="24" :icon="mdiPound" v-else-if="!transactionTag.hidden"/>
                                                 <span class="ml-3">{{ transactionTag.name }}</span>
                                             </template>
                                         </v-checkbox>
@@ -190,17 +190,6 @@ const {
 
 const transactionTagsStore = useTransactionTagsStore();
 
-const icons = {
-    selectAll: mdiSelectAll,
-    selectNone: mdiSelect,
-    selectInverse: mdiSelectInverse,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    more: mdiDotsVertical,
-    check: mdiCheck,
-    tag: mdiPound
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const expandTagCategories = ref<string[]>([ 'default' ]);
diff --git a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
index c8010b19..67ae080e 100644
--- a/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
+++ b/src/views/desktop/overview/cards/IncomeExpenseOverviewCard.vue
@@ -7,7 +7,7 @@
             <span class="font-weight-bold ml-3">{{ title }}</span>
             <v-spacer/>
             <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true">
-                <v-icon :icon="icons.more" />
+                <v-icon :icon="mdiDotsVertical" />
                 <v-menu activator="parent">
                     <v-list>
                         <slot name="menus"></slot>
@@ -46,8 +46,4 @@ defineProps<{
 }>();
 
 const { tt } = useI18n();
-
-const icons = {
-    more: mdiDotsVertical
-};
 </script>
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index 28323004..1a604c0f 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -53,11 +53,11 @@
                                         <div class="title-and-toolbar d-flex align-center">
                                             <v-btn class="mr-3 d-md-none" density="compact" color="default" variant="plain"
                                                    :ripple="false" :icon="true" @click="showNav = !showNav">
-                                                <v-icon :icon="icons.menu" size="24" />
+                                                <v-icon :icon="mdiMenu" size="24" />
                                             </v-btn>
                                             <span>{{ tt('Statistics & Analysis') }}</span>
                                             <v-btn-group class="ml-4" color="default" density="comfortable" variant="outlined" divided>
-                                                <v-btn :icon="icons.left"
+                                                <v-btn :icon="mdiArrowLeft"
                                                        :disabled="loading || !canShiftDateRange"
                                                        @click="shiftDateRange(-1)"/>
                                                 <v-menu location="bottom">
@@ -67,7 +67,7 @@
                                                     </template>
                                                     <v-list :selected="[queryDateType]">
                                                         <v-list-item :key="dateRange.type" :value="dateRange.type"
-                                                                     :append-icon="(queryDateType === dateRange.type ? icons.check : undefined)"
+                                                                     :append-icon="(queryDateType === dateRange.type ? mdiCheck : undefined)"
                                                                      v-for="dateRange in allDateRanges">
                                                             <v-list-item-title
                                                                 class="cursor-pointer"
@@ -83,7 +83,7 @@
                                                         </v-list-item>
                                                     </v-list>
                                                 </v-menu>
-                                                <v-btn :icon="icons.right"
+                                                <v-btn :icon="mdiArrowRight"
                                                        :disabled="loading || !canShiftDateRange"
                                                        @click="shiftDateRange(1)"/>
                                             </v-btn-group>
@@ -91,12 +91,12 @@
                                             <v-menu location="bottom" v-if="queryAnalysisType === StatisticsAnalysisType.TrendAnalysis">
                                                 <template #activator="{ props }">
                                                     <v-btn class="ml-3" color="default" variant="outlined"
-                                                           :prepend-icon="icons.dateAggregation" :disabled="loading"
+                                                           :prepend-icon="mdiCalendarRangeOutline" :disabled="loading"
                                                            v-bind="props">{{ queryTrendDateAggregationTypeName }}</v-btn>
                                                 </template>
                                                 <v-list>
                                                     <v-list-item class="cursor-pointer" :key="aggregationType.type" :value="aggregationType.type"
-                                                                 :append-icon="(trendDateAggregationType === aggregationType.type ? icons.check : undefined)"
+                                                                 :append-icon="(trendDateAggregationType === aggregationType.type ? mdiCheck : undefined)"
                                                                  :title="aggregationType.displayName"
                                                                  v-for="aggregationType in allDateAggregationTypes"
                                                                  @click="setTrendDateAggregationType(aggregationType.type)">
@@ -109,27 +109,27 @@
                                                 <template #loader>
                                                     <v-progress-circular indeterminate size="20"/>
                                                 </template>
-                                                <v-icon :icon="icons.refresh" size="24" />
+                                                <v-icon :icon="mdiRefresh" size="24" />
                                                 <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                                             </v-btn>
                                             <v-spacer/>
                                             <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                                    :disabled="loading" :icon="true">
-                                                <v-icon :icon="icons.more" />
+                                                <v-icon :icon="mdiDotsVertical" />
                                                 <v-menu activator="parent">
                                                     <v-list>
-                                                        <v-list-item :prepend-icon="icons.filter"
+                                                        <v-list-item :prepend-icon="mdiFilterOutline"
                                                                      :title="tt('Filter Accounts')"
                                                                      @click="showFilterAccountDialog = true"></v-list-item>
-                                                        <v-list-item :prepend-icon="icons.filter"
+                                                        <v-list-item :prepend-icon="mdiFilterOutline"
                                                                      :title="tt('Filter Transaction Categories')"
                                                                      @click="showFilterCategoryDialog = true"></v-list-item>
-                                                        <v-list-item :prepend-icon="icons.filter"
+                                                        <v-list-item :prepend-icon="mdiFilterOutline"
                                                                      :title="tt('Filter Transaction Tags')"
                                                                      @click="showFilterTagDialog = true"></v-list-item>
                                                         <v-divider class="my-2"/>
                                                         <v-list-item to="/app/settings?tab=statisticsSetting"
-                                                                     :prepend-icon="icons.filterSettings"
+                                                                     :prepend-icon="mdiFilterCogOutline"
                                                                      :title="tt('Settings')"></v-list-item>
                                                     </v-list>
                                                 </v-menu>
@@ -192,7 +192,7 @@
                                                 <v-list-item class="pl-0">
                                                     <template #prepend>
                                                         <div>
-                                                            <v-icon class="disabled mr-0" size="34" :icon="icons.square" />
+                                                            <v-icon class="disabled mr-0" size="34" :icon="mdiSquareRounded" />
                                                         </div>
                                                     </template>
                                                     <div class="d-flex flex-column ml-2">
@@ -374,7 +374,6 @@ import {
     mdiMenu,
     mdiFilterOutline,
     mdiFilterCogOutline,
-    mdiPencilOutline,
     mdiDotsVertical
 } from '@mdi/js';
 
@@ -433,20 +432,6 @@ const accountsStore = useAccountsStore();
 const transactionCategoriesStore = useTransactionCategoriesStore();
 const statisticsStore = useStatisticsStore();
 
-const icons = {
-    check: mdiCheck,
-    left: mdiArrowLeft,
-    right: mdiArrowRight,
-    dateAggregation: mdiCalendarRangeOutline,
-    refresh: mdiRefresh,
-    square: mdiSquareRounded,
-    menu: mdiMenu,
-    filter: mdiFilterOutline,
-    filterSettings: mdiFilterCogOutline,
-    pencil: mdiPencilOutline,
-    more: mdiDotsVertical
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
 const activeTab = ref<string>('statisticsPage');
diff --git a/src/views/desktop/tags/ListPage.vue b/src/views/desktop/tags/ListPage.vue
index 8b9c9f40..52a48b48 100644
--- a/src/views/desktop/tags/ListPage.vue
+++ b/src/views/desktop/tags/ListPage.vue
@@ -16,19 +16,19 @@
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
-                            <v-icon :icon="icons.refresh" size="24" />
+                            <v-icon :icon="mdiRefresh" size="24" />
                             <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                         <v-spacer/>
                         <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                :disabled="loading || updating || hasEditingTag" :icon="true">
-                            <v-icon :icon="icons.more" />
+                            <v-icon :icon="mdiDotsVertical" />
                             <v-menu activator="parent">
                                 <v-list>
-                                    <v-list-item :prepend-icon="icons.show"
+                                    <v-list-item :prepend-icon="mdiEyeOutline"
                                                  :title="tt('Show Hidden Transaction Tags')"
                                                  v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                                    <v-list-item :prepend-icon="icons.hide"
+                                    <v-list-item :prepend-icon="mdiEyeOffOutline"
                                                  :title="tt('Hide Hidden Transaction Tags')"
                                                  v-if="showHidden" @click="showHidden = false"></v-list-item>
                                 </v-list>
@@ -78,11 +78,11 @@
                                     <div class="d-flex align-center">
                                         <div class="d-flex align-center" v-if="editingTag.id !== element.id">
                                             <v-badge class="right-bottom-icon" color="secondary"
-                                                     location="bottom right" offset-x="8" :icon="icons.hide"
+                                                     location="bottom right" offset-x="8" :icon="mdiEyeOffOutline"
                                                      v-if="element.hidden">
-                                                <v-icon size="20" start :icon="icons.tag"/>
+                                                <v-icon size="20" start :icon="mdiPound"/>
                                             </v-badge>
-                                            <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
+                                            <v-icon size="20" start :icon="mdiPound" v-else-if="!element.hidden"/>
                                             <span class="transaction-tag-name">{{ element.name }}</span>
                                         </div>
 
@@ -96,11 +96,11 @@
                                         >
                                             <template #prepend>
                                                 <v-badge class="right-bottom-icon" color="secondary"
-                                                         location="bottom right" offset-x="8" :icon="icons.hide"
+                                                         location="bottom right" offset-x="8" :icon="mdiEyeOffOutline"
                                                          v-if="element.hidden">
-                                                    <v-icon size="20" start :icon="icons.tag"/>
+                                                    <v-icon size="20" start :icon="mdiPound"/>
                                                 </v-badge>
-                                                <v-icon size="20" start :icon="icons.tag" v-else-if="!element.hidden"/>
+                                                <v-icon size="20" start :icon="mdiPound" v-else-if="!element.hidden"/>
                                             </template>
                                         </v-text-field>
 
@@ -109,7 +109,7 @@
                                         <v-btn class="px-2 ml-2" color="default"
                                                density="comfortable" variant="text"
                                                :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="element.hidden ? icons.show : icons.hide"
+                                               :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
                                                :loading="tagHiding[element.id]"
                                                :disabled="loading || updating"
                                                v-if="editingTag.id !== element.id"
@@ -122,7 +122,7 @@
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
                                                :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="icons.edit"
+                                               :prepend-icon="mdiPencilOutline"
                                                :loading="tagUpdating[element.id]"
                                                :disabled="loading || updating"
                                                v-if="editingTag.id !== element.id"
@@ -135,7 +135,7 @@
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
                                                :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="icons.remove"
+                                               :prepend-icon="mdiDeleteOutline"
                                                :loading="tagRemoving[element.id]"
                                                :disabled="loading || updating"
                                                v-if="editingTag.id !== element.id"
@@ -147,7 +147,7 @@
                                         </v-btn>
                                         <v-btn class="px-2"
                                                density="comfortable" variant="text"
-                                               :prepend-icon="icons.confirm"
+                                               :prepend-icon="mdiCheck"
                                                :loading="tagUpdating[element.id]"
                                                :disabled="loading || updating || !isTagModified(element)"
                                                v-if="editingTag.id === element.id" @click="save(editingTag)">
@@ -158,14 +158,14 @@
                                         </v-btn>
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
-                                               :prepend-icon="icons.cancel"
+                                               :prepend-icon="mdiClose"
                                                :disabled="loading || updating"
                                                v-if="editingTag.id === element.id" @click="cancelSave(editingTag)">
                                             {{ tt('Cancel') }}
                                         </v-btn>
                                         <span class="ml-2">
                                             <v-icon :class="!loading && !updating && !hasEditingTag && availableTagCount > 1 ? 'drag-handle' : 'disabled'"
-                                                    :icon="icons.drag"/>
+                                                    :icon="mdiDrag"/>
                                             <v-tooltip activator="parent" v-if="!loading && !updating && !hasEditingTag && availableTagCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                         </span>
                                     </div>
@@ -183,14 +183,14 @@
                                               :disabled="loading || updating" :placeholder="tt('Tag Title')"
                                               v-model="newTag.name" @keyup.enter="save(newTag)">
                                     <template #prepend>
-                                        <v-icon size="20" start :icon="icons.tag"/>
+                                        <v-icon size="20" start :icon="mdiPound"/>
                                     </template>
                                 </v-text-field>
 
                                 <v-spacer/>
 
                                 <v-btn class="px-2" density="comfortable" variant="text"
-                                       :prepend-icon="icons.confirm"
+                                       :prepend-icon="mdiCheck"
                                        :loading="tagUpdating['']"
                                        :disabled="loading || updating || !isTagModified(newTag)"
                                        @click="save(newTag)">
@@ -201,13 +201,13 @@
                                 </v-btn>
                                 <v-btn class="px-2" color="default"
                                        density="comfortable" variant="text"
-                                       :prepend-icon="icons.cancel"
+                                       :prepend-icon="mdiClose"
                                        :disabled="loading || updating"
                                        @click="cancelSave(newTag)">
                                     {{ tt('Cancel') }}
                                 </v-btn>
                                 <span class="ml-2">
-                                    <v-icon class="disabled" :icon="icons.drag"/>
+                                    <v-icon class="disabled" :icon="mdiDrag"/>
                                 </span>
                             </div>
                         </td>
@@ -241,7 +241,6 @@ import {
 
 import {
     mdiRefresh,
-    mdiPlus,
     mdiPencilOutline,
     mdiCheck,
     mdiClose,
@@ -260,20 +259,6 @@ const { tt } = useI18n();
 
 const transactionTagsStore = useTransactionTagsStore();
 
-const icons = {
-    refresh: mdiRefresh,
-    add: mdiPlus,
-    edit: mdiPencilOutline,
-    confirm: mdiCheck,
-    cancel: mdiClose,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    remove: mdiDeleteOutline,
-    drag: mdiDrag,
-    more: mdiDotsVertical,
-    tag: mdiPound
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
diff --git a/src/views/desktop/templates/ListPage.vue b/src/views/desktop/templates/ListPage.vue
index 23477c1c..942da0cd 100644
--- a/src/views/desktop/templates/ListPage.vue
+++ b/src/views/desktop/templates/ListPage.vue
@@ -16,19 +16,19 @@
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
-                            <v-icon :icon="icons.refresh" size="24" />
+                            <v-icon :icon="mdiRefresh" size="24" />
                             <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                         <v-spacer/>
                         <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                                :disabled="loading || updating" :icon="true">
-                            <v-icon :icon="icons.more" />
+                            <v-icon :icon="mdiDotsVertical" />
                             <v-menu activator="parent">
                                 <v-list>
-                                    <v-list-item :prepend-icon="icons.show"
+                                    <v-list-item :prepend-icon="mdiEyeOutline"
                                                  :title="tt('Show Hidden Transaction Templates')"
                                                  v-if="!showHidden" @click="showHidden = true"></v-list-item>
-                                    <v-list-item :prepend-icon="icons.hide"
+                                    <v-list-item :prepend-icon="mdiEyeOffOutline"
                                                  :title="tt('Hide Hidden Transaction Templates')"
                                                  v-if="showHidden" @click="showHidden = false"></v-list-item>
                                 </v-list>
@@ -79,11 +79,11 @@
                                     <div class="d-flex align-center">
                                         <div class="d-flex align-center">
                                             <v-badge class="right-bottom-icon" color="secondary"
-                                                     location="bottom right" offset-x="8" :icon="icons.hide"
+                                                     location="bottom right" offset-x="8" :icon="mdiEyeOffOutline"
                                                      v-if="element.hidden">
-                                                <v-icon size="20" start :icon="templateType === TemplateType.Schedule.type ? icons.clock : icons.text"/>
+                                                <v-icon size="20" start :icon="templateType === TemplateType.Schedule.type ? mdiClockTimeNineOutline : mdiTextBoxOutline"/>
                                             </v-badge>
-                                            <v-icon size="20" start :icon="templateType === TemplateType.Schedule.type ? icons.clock : icons.text" v-else-if="!element.hidden"/>
+                                            <v-icon size="20" start :icon="templateType === TemplateType.Schedule.type ? mdiClockTimeNineOutline : mdiTextBoxOutline" v-else-if="!element.hidden"/>
                                             <span class="transaction-template-name">{{ element.name }}</span>
                                         </div>
 
@@ -92,7 +92,7 @@
                                         <v-btn class="px-2 ml-2" color="default"
                                                density="comfortable" variant="text"
                                                :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="element.hidden ? icons.show : icons.hide"
+                                               :prepend-icon="element.hidden ? mdiEyeOutline : mdiEyeOffOutline"
                                                :loading="templateHiding[element.id]"
                                                :disabled="loading || updating"
                                                @click="hide(element, !element.hidden)">
@@ -104,7 +104,7 @@
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
                                                :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="icons.edit"
+                                               :prepend-icon="mdiPencilOutline"
                                                :disabled="loading || updating"
                                                @click="edit(element)">
                                             <template #loader>
@@ -115,7 +115,7 @@
                                         <v-btn class="px-2" color="default"
                                                density="comfortable" variant="text"
                                                :class="{ 'd-none': loading, 'hover-display': !loading }"
-                                               :prepend-icon="icons.remove"
+                                               :prepend-icon="mdiDeleteOutline"
                                                :loading="templateRemoving[element.id]"
                                                :disabled="loading || updating"
                                                @click="remove(element)">
@@ -126,7 +126,7 @@
                                         </v-btn>
                                         <span class="ml-2">
                                             <v-icon :class="!loading && !updating && availableTemplateCount > 1 ? 'drag-handle' : 'disabled'"
-                                                    :icon="icons.drag"/>
+                                                    :icon="mdiDrag"/>
                                             <v-tooltip activator="parent" v-if="!loading && !updating && availableTemplateCount > 1">{{ tt('Drag to Reorder') }}</v-tooltip>
                                         </span>
                                     </div>
@@ -167,10 +167,7 @@ import {
 
 import {
     mdiRefresh,
-    mdiPlus,
     mdiPencilOutline,
-    mdiCheck,
-    mdiClose,
     mdiEyeOffOutline,
     mdiEyeOutline,
     mdiDeleteOutline,
@@ -192,21 +189,6 @@ const { tt } = useI18n();
 
 const transactionTemplatesStore = useTransactionTemplatesStore();
 
-const icons = {
-    refresh: mdiRefresh,
-    add: mdiPlus,
-    edit: mdiPencilOutline,
-    confirm: mdiCheck,
-    cancel: mdiClose,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    remove: mdiDeleteOutline,
-    drag: mdiDrag,
-    more: mdiDotsVertical,
-    text: mdiTextBoxOutline,
-    clock: mdiClockTimeNineOutline
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const editDialog = useTemplateRef<EditDialogType>('editDialog');
diff --git a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
index 2d4ae478..3dd4fcef 100644
--- a/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/BatchReplaceDialog.vue
@@ -145,7 +145,7 @@
                             v-model="targetItem"
                         >
                             <template #chip="{ props, item }">
-                                <v-chip :prepend-icon="icons.tag" :text="item.title" v-bind="props"/>
+                                <v-chip :prepend-icon="mdiPound" :text="item.title" v-bind="props"/>
                             </template>
 
                             <template #item="{ props, item }">
@@ -153,7 +153,7 @@
                                     <template #title>
                                         <v-list-item-title>
                                             <div class="d-flex align-center">
-                                                <v-icon size="20" start :icon="icons.tag"/>
+                                                <v-icon size="20" start :icon="mdiPound"/>
                                                 <span>{{ item.title }}</span>
                                             </div>
                                         </v-list-item-title>
@@ -215,10 +215,6 @@ const accountsStore = useAccountsStore();
 const transactionCategoriesStore = useTransactionCategoriesStore();
 const transactionTagsStore = useTransactionTagsStore();
 
-const icons = {
-    tag: mdiPound
-};
-
 const showState = ref<boolean>(false);
 const mode = ref<string>('');
 const type = ref<string>('');
diff --git a/src/views/desktop/transactions/list/dialogs/EditDialog.vue b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
index 12982d26..90ed49d8 100644
--- a/src/views/desktop/transactions/list/dialogs/EditDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/EditDialog.vue
@@ -9,26 +9,26 @@
                     </div>
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2" :icon="true"
                            :disabled="loading || submitting" v-if="mode !== TransactionEditPageMode.View">
-                        <v-icon :icon="icons.more" />
+                        <v-icon :icon="mdiDotsVertical" />
                         <v-menu activator="parent">
                             <v-list>
-                                <v-list-item :prepend-icon="icons.swap"
+                                <v-list-item :prepend-icon="mdiSwapHorizontal"
                                              :title="tt('Swap Account')"
                                              v-if="transaction.type === TransactionType.Transfer"
                                              @click="swapTransactionData(true, false)"></v-list-item>
-                                <v-list-item :prepend-icon="icons.swap"
+                                <v-list-item :prepend-icon="mdiSwapHorizontal"
                                              :title="tt('Swap Amount')"
                                              v-if="transaction.type === TransactionType.Transfer"
                                              @click="swapTransactionData(false, true)"></v-list-item>
-                                <v-list-item :prepend-icon="icons.swap"
+                                <v-list-item :prepend-icon="mdiSwapHorizontal"
                                              :title="tt('Swap Account and Amount')"
                                              v-if="transaction.type === TransactionType.Transfer"
                                              @click="swapTransactionData(true, true)"></v-list-item>
                                 <v-divider v-if="transaction.type === TransactionType.Transfer" />
-                                <v-list-item :prepend-icon="icons.show"
+                                <v-list-item :prepend-icon="mdiEyeOutline"
                                              :title="tt('Show Amount')"
                                              v-if="transaction.hideAmount" @click="transaction.hideAmount = false"></v-list-item>
-                                <v-list-item :prepend-icon="icons.hide"
+                                <v-list-item :prepend-icon="mdiEyeOffOutline"
                                              :title="tt('Hide Amount')"
                                              v-if="!transaction.hideAmount" @click="transaction.hideAmount = true"></v-list-item>
                             </v-list>
@@ -275,7 +275,7 @@
                                         v-model:search="tagSearchContent"
                                     >
                                         <template #chip="{ props, item }">
-                                            <v-chip :prepend-icon="icons.tag" :text="item.title" v-bind="props"/>
+                                            <v-chip :prepend-icon="mdiPound" :text="item.title" v-bind="props"/>
                                         </template>
 
                                         <template #item="{ props, item }">
@@ -283,7 +283,7 @@
                                                 <template #title>
                                                     <v-list-item-title>
                                                         <div class="d-flex align-center">
-                                                            <v-icon size="20" start :icon="icons.tag"/>
+                                                            <v-icon size="20" start :icon="mdiPound"/>
                                                             <span>{{ item.title }}</span>
                                                         </div>
                                                     </v-list-item-title>
@@ -345,9 +345,9 @@
                                         </template>
                                     </v-img>
                                     <div class="picture-control-icon" :class="{ 'show-control-icon': pictureInfo.pictureId === removingPictureId }">
-                                        <v-icon size="64" :icon="icons.remove" v-if="(mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit) && pictureInfo.pictureId !== removingPictureId"/>
+                                        <v-icon size="64" :icon="mdiTrashCanOutline" v-if="(mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit) && pictureInfo.pictureId !== removingPictureId"/>
                                         <v-progress-circular color="grey-500" indeterminate size="48" v-if="(mode === TransactionEditPageMode.Add || mode === TransactionEditPageMode.Edit) && pictureInfo.pictureId === removingPictureId"></v-progress-circular>
-                                        <v-icon size="64" :icon="icons.fullscreen" v-if="mode !== TransactionEditPageMode.Add && mode !== TransactionEditPageMode.Edit"/>
+                                        <v-icon size="64" :icon="mdiFullscreen" v-if="mode !== TransactionEditPageMode.Add && mode !== TransactionEditPageMode.Edit"/>
                                     </div>
                                 </v-avatar>
                             </v-col>
@@ -357,7 +357,7 @@
                                           :class="{ 'enabled': !submitting, 'cursor-pointer': !submitting }"
                                           color="rgba(0,0,0,0)" @click="showOpenPictureDialog">
                                     <v-tooltip activator="parent" v-if="!submitting">{{ tt('Add Picture') }}</v-tooltip>
-                                    <v-icon class="transaction-picture-add-icon" size="56" :icon="icons.add" v-if="!uploadingPicture"/>
+                                    <v-icon class="transaction-picture-add-icon" size="56" :icon="mdiImagePlusOutline" v-if="!uploadingPicture"/>
                                     <v-progress-circular color="grey-500" indeterminate size="48" v-if="uploadingPicture"></v-progress-circular>
                                 </v-avatar>
                             </v-col>
@@ -450,7 +450,6 @@ import {
     mdiEyeOutline,
     mdiSwapHorizontal,
     mdiPound,
-    mdiImageOutline,
     mdiImagePlusOutline,
     mdiTrashCanOutline,
     mdiFullscreen
@@ -534,18 +533,6 @@ const transactionTagsStore = useTransactionTagsStore();
 const transactionsStore = useTransactionsStore();
 const transactionTemplatesStore = useTransactionTemplatesStore();
 
-const icons = {
-    more: mdiDotsVertical,
-    show: mdiEyeOutline,
-    hide: mdiEyeOffOutline,
-    swap: mdiSwapHorizontal,
-    tag: mdiPound,
-    picture: mdiImageOutline ,
-    add: mdiImagePlusOutline,
-    remove: mdiTrashCanOutline,
-    fullscreen : mdiFullscreen
-};
-
 const map = useTemplateRef<MapViewType>('map');
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
diff --git a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
index 65485a8d..1a487411 100644
--- a/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
+++ b/src/views/desktop/transactions/list/dialogs/ImportDialog.vue
@@ -10,87 +10,87 @@
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                            :icon="true" :disabled="loading || submitting"
                            v-if="currentStep === 'checkData'">
-                        <v-icon :icon="icons.filter" />
+                        <v-icon :icon="mdiFilterOutline" />
                         <v-menu activator="parent" max-height="500">
                             <v-list>
                                 <v-list-subheader :title="tt('Date Range')"/>
                                 <v-list-item :title="tt('All')"
-                                             :append-icon="filters.minDatetime === null || filters.maxDatetime === null ? icons.checked : undefined"
+                                             :append-icon="filters.minDatetime === null || filters.maxDatetime === null ? mdiCheck : undefined"
                                              @click="filters.minDatetime = filters.maxDatetime = null"></v-list-item>
                                 <v-list-item :title="tt('Custom')"
                                              :subtitle="displayFilterCustomDateRange"
-                                             :append-icon="filters.minDatetime !== null && filters.maxDatetime !== null ? icons.checked : undefined"
+                                             :append-icon="filters.minDatetime !== null && filters.maxDatetime !== null ? mdiCheck : undefined"
                                              @click="showCustomDateRangeDialog = true"></v-list-item>
                                 <v-divider class="my-2"/>
                                 <v-list-subheader :title="tt('Type')"/>
                                 <v-list-item :title="tt('All')"
-                                             :append-icon="filters.transactionType === null ? icons.checked : undefined"
+                                             :append-icon="filters.transactionType === null ? mdiCheck : undefined"
                                              @click="filters.transactionType = null"></v-list-item>
                                 <v-list-item :title="tt('Income')"
-                                             :append-icon="filters.transactionType === TransactionType.Income ? icons.checked : undefined"
+                                             :append-icon="filters.transactionType === TransactionType.Income ? mdiCheck : undefined"
                                              @click="filters.transactionType = TransactionType.Income"></v-list-item>
                                 <v-list-item :title="tt('Expense')"
-                                             :append-icon="filters.transactionType === TransactionType.Expense ? icons.checked : undefined"
+                                             :append-icon="filters.transactionType === TransactionType.Expense ? mdiCheck : undefined"
                                              @click="filters.transactionType = TransactionType.Expense"></v-list-item>
                                 <v-list-item :title="tt('Transfer')"
-                                             :append-icon="filters.transactionType === TransactionType.Transfer ? icons.checked : undefined"
+                                             :append-icon="filters.transactionType === TransactionType.Transfer ? mdiCheck : undefined"
                                              @click="filters.transactionType = TransactionType.Transfer"></v-list-item>
                                 <v-divider class="my-2"/>
                                 <v-list-subheader :title="tt('Category')"/>
                                 <v-list-item :title="tt('All')"
-                                             :append-icon="filters.category === null ? icons.checked : undefined"
+                                             :append-icon="filters.category === null ? mdiCheck : undefined"
                                              @click="filters.category = null"></v-list-item>
                                 <v-list-item :title="tt('Invalid Category')"
-                                             :append-icon="filters.category === undefined ? icons.checked : undefined"
+                                             :append-icon="filters.category === undefined ? mdiCheck : undefined"
                                              @click="filters.category = undefined"></v-list-item>
                                 <v-list-item :title="tt('None')"
-                                             :append-icon="filters.category === '' ? icons.checked : undefined"
+                                             :append-icon="filters.category === '' ? mdiCheck : undefined"
                                              @click="filters.category = ''"></v-list-item>
                                 <v-list-item :title="name" :key="name"
-                                             :append-icon="filters.category === name ? icons.checked : undefined"
+                                             :append-icon="filters.category === name ? mdiCheck : undefined"
                                              v-for="name in allUsedCategoryNames"
                                              @click="filters.category = name"></v-list-item>
                                 <v-divider class="my-2"/>
                                 <v-list-subheader :title="tt('Account')"/>
                                 <v-list-item :title="tt('All')"
-                                             :append-icon="filters.account === null ? icons.checked : undefined"
+                                             :append-icon="filters.account === null ? mdiCheck : undefined"
                                              @click="filters.account = null"></v-list-item>
                                 <v-list-item :title="tt('Invalid Account')"
-                                             :append-icon="filters.account === undefined ? icons.checked : undefined"
+                                             :append-icon="filters.account === undefined ? mdiCheck : undefined"
                                              @click="filters.account = undefined"></v-list-item>
                                 <v-list-item :title="tt('None')"
-                                             :append-icon="filters.account === '' ? icons.checked : undefined"
+                                             :append-icon="filters.account === '' ? mdiCheck : undefined"
                                              @click="filters.account = ''"></v-list-item>
                                 <v-list-item :title="name" :key="name"
-                                             :append-icon="filters.account === name ? icons.checked : undefined"
+                                             :append-icon="filters.account === name ? mdiCheck : undefined"
                                              v-for="name in allUsedAccountNames"
                                              @click="filters.account = name"></v-list-item>
                                 <v-divider class="my-2"/>
                                 <v-list-subheader :title="tt('Tags')"/>
                                 <v-list-item :title="tt('All')"
-                                             :append-icon="filters.tag === null ? icons.checked : undefined"
+                                             :append-icon="filters.tag === null ? mdiCheck : undefined"
                                              @click="filters.tag = null"></v-list-item>
                                 <v-list-item :title="tt('Invalid Tag')"
-                                             :append-icon="filters.tag === undefined ? icons.checked : undefined"
+                                             :append-icon="filters.tag === undefined ? mdiCheck : undefined"
                                              @click="filters.tag = undefined"></v-list-item>
                                 <v-list-item :title="tt('None')"
-                                             :append-icon="filters.tag === '' ? icons.checked : undefined"
+                                             :append-icon="filters.tag === '' ? mdiCheck : undefined"
                                              @click="filters.tag = ''"></v-list-item>
                                 <v-list-item :title="name" :key="name"
-                                             :append-icon="filters.tag === name ? icons.checked : undefined"
+                                             :append-icon="filters.tag === name ? mdiCheck : undefined"
                                              v-for="name in allUsedTagNames"
                                              @click="filters.tag = name"></v-list-item>
                                 <v-divider class="my-2"/>
                                 <v-list-subheader :title="tt('Description')"/>
                                 <v-list-item :title="tt('All')"
-                                             :append-icon="filters.description === null ? icons.checked : undefined"
+                                             :append-icon="filters.description === null ? mdiCheck : undefined"
                                              @click="filters.description = null"></v-list-item>
                                 <v-list-item :title="tt('None')"
-                                             :append-icon="filters.description === '' ? icons.checked : undefined"
+                                             :append-icon="filters.description === '' ? mdiCheck : undefined"
                                              @click="filters.description = ''"></v-list-item>
                                 <v-list-item :title="tt('Custom')"
                                              :subtitle="filters.description !== null ? filters.description : undefined"
-                                             :append-icon="filters.description !== null && filters.description !== '' ? icons.checked : undefined"
+                                             :append-icon="filters.description !== null && filters.description !== '' ? mdiCheck : undefined"
                                              @click="currentDescriptionFilterValue = filters.description || ''; showCustomDescriptionDialog = true"></v-list-item>
                             </v-list>
                         </v-menu>
@@ -98,47 +98,47 @@
                     <v-btn density="comfortable" color="default" variant="text" class="ml-2"
                            :icon="true" :disabled="loading || submitting"
                            v-if="currentStep === 'checkData'">
-                        <v-icon :icon="icons.more" />
+                        <v-icon :icon="mdiDotsVertical" />
                         <v-menu activator="parent">
                             <v-list>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || selectedExpenseTransactionCount < 1"
                                              :title="tt('Batch Replace Selected Expense Categories')"
                                              @click="showBatchReplaceDialog('expenseCategory')"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || selectedIncomeTransactionCount < 1"
                                              :title="tt('Batch Replace Selected Income Categories')"
                                              @click="showBatchReplaceDialog('incomeCategory')"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || selectedTransferTransactionCount < 1"
                                              :title="tt('Batch Replace Selected Transfer Categories')"
                                              @click="showBatchReplaceDialog('transferCategory')"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || selectedImportTransactionCount < 1"
                                              :title="tt('Batch Replace Selected Accounts')"
                                              @click="showBatchReplaceDialog('account')"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || selectedTransferTransactionCount < 1"
                                              :title="tt('Batch Replace Selected Destination Accounts')"
                                              @click="showBatchReplaceDialog('destinationAccount')"></v-list-item>
                                 <v-divider class="my-2"/>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || !allInvalidExpenseCategoryNames || allInvalidExpenseCategoryNames.length < 1"
                                              :title="tt('Replace Invalid Expense Categories')"
                                              @click="showReplaceInvalidItemDialog('expenseCategory', allInvalidExpenseCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || !allInvalidIncomeCategoryNames || allInvalidIncomeCategoryNames.length < 1"
                                              :title="tt('Replace Invalid Income Categories')"
                                              @click="showReplaceInvalidItemDialog('incomeCategory', allInvalidIncomeCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || !allInvalidTransferCategoryNames || allInvalidTransferCategoryNames.length < 1"
                                              :title="tt('Replace Invalid Transfer Categories')"
                                              @click="showReplaceInvalidItemDialog('transferCategory', allInvalidTransferCategoryNames)"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || !allInvalidAccountNames || allInvalidAccountNames.length < 1"
                                              :title="tt('Replace Invalid Accounts')"
                                              @click="showReplaceInvalidItemDialog('account', allInvalidAccountNames)"></v-list-item>
-                                <v-list-item :prepend-icon="icons.replace"
+                                <v-list-item :prepend-icon="mdiFindReplace"
                                              :disabled="!!editingTransaction || !allInvalidTransactionTagNames || allInvalidTransactionTagNames.length < 1"
                                              :title="tt('Replace Invalid Transaction Tags')"
                                              @click="showReplaceInvalidItemDialog('tag', allInvalidTransactionTagNames)"></v-list-item>
@@ -195,7 +195,7 @@
 
                         <v-col cols="12" md="12" class="mb-0 pb-0" v-if="exportFileGuideDocumentUrl">
                             <a :href="exportFileGuideDocumentUrl" :class="{ 'disabled': submitting }" target="_blank">
-                                <v-icon :icon="icons.document" size="16" />
+                                <v-icon :icon="mdiHelpCircleOutline" size="16" />
                                 <span class="ml-1">{{ tt('How to export this file?') }}</span>
                                 <span class="ml-1" v-if="exportFileGuideDocumentLanguageName">({{ exportFileGuideDocumentLanguageName }})</span>
                             </a>
@@ -229,37 +229,37 @@
                             >
                                 <v-menu activator="parent" location="bottom">
                                     <v-list>
-                                        <v-list-item :prepend-icon="icons.selectAll"
+                                        <v-list-item :prepend-icon="mdiSelectAll"
                                                      :title="tt('Select All Valid Items')"
                                                      :disabled="loading || submitting"
                                                      @click="selectAllValid"></v-list-item>
-                                        <v-list-item :prepend-icon="icons.selectAll"
+                                        <v-list-item :prepend-icon="mdiSelectAll"
                                                      :title="tt('Select All Invalid Items')"
                                                      :disabled="loading || submitting"
                                                      @click="selectAllInvalid"></v-list-item>
                                         <v-divider class="my-2"/>
-                                        <v-list-item :prepend-icon="icons.selectAll"
+                                        <v-list-item :prepend-icon="mdiSelectAll"
                                                      :title="tt('Select All')"
                                                      :disabled="loading || submitting"
                                                      @click="selectAll"></v-list-item>
-                                        <v-list-item :prepend-icon="icons.selectNone"
+                                        <v-list-item :prepend-icon="mdiSelect"
                                                      :title="tt('Select None')"
                                                      :disabled="loading || submitting"
                                                      @click="selectNone"></v-list-item>
-                                        <v-list-item :prepend-icon="icons.selectInverse"
+                                        <v-list-item :prepend-icon="mdiSelectInverse"
                                                      :title="tt('Invert Selection')"
                                                      :disabled="loading || submitting"
                                                      @click="selectInvert"></v-list-item>
                                         <v-divider class="my-2"/>
-                                        <v-list-item :prepend-icon="icons.selectAll"
+                                        <v-list-item :prepend-icon="mdiSelectAll"
                                                      :title="tt('Select All in This Page')"
                                                      :disabled="loading || submitting"
                                                      @click="selectAllInThisPage"></v-list-item>
-                                        <v-list-item :prepend-icon="icons.selectNone"
+                                        <v-list-item :prepend-icon="mdiSelect"
                                                      :title="tt('Select None in This Page')"
                                                      :disabled="loading || submitting"
                                                      @click="selectNoneInThisPage"></v-list-item>
-                                        <v-list-item :prepend-icon="icons.selectInverse"
+                                        <v-list-item :prepend-icon="mdiSelectInverse"
                                                      :title="tt('Invert Selection in This Page')"
                                                      :disabled="loading || submitting"
                                                      @click="selectInvertInThisPage"></v-list-item>
@@ -276,7 +276,7 @@
                         <template #item.valid="{ item }">
                             <v-icon size="small" :class="{ 'text-error': !item.valid }"
                                     :disabled="loading || submitting"
-                                    :icon="editingTransaction === item ? icons.complete : icons.edit"
+                                    :icon="editingTransaction === item ? mdiCheck : mdiPencilOutline"
                                     @click="editTransaction(item)">
                             </v-icon>
                             <v-tooltip activator="parent" v-if="!loading && !submitting">{{ tt('Edit') }}</v-tooltip>
@@ -304,7 +304,7 @@
                                     {{ allCategoriesMap[item.categoryId].name }}
                                 </span>
                                 <div class="text-error font-italic" v-else-if="item.type !== TransactionType.ModifyBalance && (!item.categoryId || item.categoryId === '0' || !allCategoriesMap[item.categoryId])">
-                                    <v-icon class="mr-1" :icon="icons.alert"/>
+                                    <v-icon class="mr-1" :icon="mdiAlertOutline"/>
                                     <span>{{ item.originalCategoryName }}</span>
                                 </div>
                             </div>
@@ -365,20 +365,20 @@
                         </template>
                         <template #item.sourceAmount="{ item }">
                             <span>{{ getTransactionDisplayAmount(item) }}</span>
-                            <v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
+                            <v-icon class="mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId"></v-icon>
                             <span v-if="item.type === TransactionType.Transfer && item.sourceAccountId !== item.destinationAccountId">{{ getTransactionDisplayDestinationAmount(item) }}</span>
                         </template>
                         <template #item.actualSourceAccountName="{ item }">
                             <div class="d-flex align-center" v-if="editingTransaction !== item">
                                 <span v-if="item.sourceAccountId && item.sourceAccountId !== '0' && allAccountsMap[item.sourceAccountId]">{{ allAccountsMap[item.sourceAccountId].name }}</span>
                                 <div class="text-error font-italic" v-else>
-                                    <v-icon class="mr-1" :icon="icons.alert"/>
+                                    <v-icon class="mr-1" :icon="mdiAlertOutline"/>
                                     <span>{{ item.originalSourceAccountName }}</span>
                                 </div>
-                                <v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
+                                <v-icon class="mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
                                 <span v-if="item.type === TransactionType.Transfer && item.destinationAccountId && item.destinationAccountId !== '0' && allAccountsMap[item.destinationAccountId]">{{allAccountsMap[item.destinationAccountId].name }}</span>
                                 <div class="text-error font-italic" v-else-if="item.type === TransactionType.Transfer && (!item.destinationAccountId || item.destinationAccountId === '0' || !allAccountsMap[item.destinationAccountId])">
-                                    <v-icon class="mr-1" :icon="icons.alert"/>
+                                    <v-icon class="mr-1" :icon="mdiAlertOutline"/>
                                     <span>{{ item.originalDestinationAccountName }}</span>
                                 </div>
                             </div>
@@ -399,7 +399,7 @@
                                                    :items="allVisibleCategorizedAccounts"
                                                    v-model="item.sourceAccountId">
                                 </two-column-select>
-                                <v-icon class="mx-1" size="13" :icon="icons.arrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
+                                <v-icon class="mx-1" size="13" :icon="mdiArrowRight" v-if="item.type === TransactionType.Transfer"></v-icon>
                                 <two-column-select density="compact" variant="plain"
                                                    primary-key-field="id" primary-value-field="category"
                                                    primary-title-field="name" primary-footer-field="displayBalance"
@@ -427,7 +427,7 @@
                             <div v-if="editingTransaction !== item">
                                 <v-chip class="transaction-tag" size="small"
                                         :class="{ 'font-italic': !tagId || tagId === '0' || !allTagsMap[tagId] }"
-                                        :prepend-icon="tagId && tagId !== '0' && allTagsMap[tagId] ? icons.tag : icons.alert"
+                                        :prepend-icon="tagId && tagId !== '0' && allTagsMap[tagId] ? mdiPound : mdiAlertOutline"
                                         :color="tagId && tagId !== '0' && allTagsMap[tagId] ? 'default' : 'error'"
                                         :text="tagId && tagId !== '0' && allTagsMap[tagId] ? allTagsMap[tagId].name : item.originalTagNames[index]"
                                         :key="tagId"
@@ -454,7 +454,7 @@
                                 >
                                     <template #chip="{ props, index }">
                                         <v-chip :class="{ 'font-italic': !isTagValid(editingTags, index) }"
-                                                :prepend-icon="isTagValid(editingTags, index) ? icons.tag : icons.alert"
+                                                :prepend-icon="isTagValid(editingTags, index) ? mdiPound : mdiAlertOutline"
                                                 :color="isTagValid(editingTags, index) ? 'default' : 'error'"
                                                 :text="isTagValid(editingTags, index) ? allTagsMap[editingTags[index]].name : item.originalTagNames[index]"
                                                 v-bind="props"/>
@@ -465,7 +465,7 @@
                                             <template #title>
                                                 <v-list-item-title>
                                                     <div class="d-flex align-center">
-                                                        <v-icon size="20" start :icon="icons.tag"/>
+                                                        <v-icon size="20" start :icon="mdiPound"/>
                                                         <span>{{ item.title }}</span>
                                                     </div>
                                                 </v-list-item-title>
@@ -545,22 +545,22 @@
 
             <div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-10">
                 <v-btn color="secondary" variant="tonal" :disabled="loading || submitting"
-                       :prepend-icon="icons.previous" @click="close(false)"
+                       :prepend-icon="mdiClose" @click="close(false)"
                        v-if="currentStep !== 'finalResult'">{{ tt('Cancel') }}</v-btn>
                 <v-btn color="primary" :disabled="loading || submitting || !importFile"
-                       :append-icon="!submitting ? icons.next : undefined" @click="parseData"
+                       :append-icon="!submitting ? mdiArrowRight : undefined" @click="parseData"
                        v-if="currentStep === 'uploadFile'">
                     {{ tt('Next') }}
                     <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                 </v-btn>
                 <v-btn color="teal" :disabled="submitting || !!editingTransaction || selectedImportTransactionCount < 1 || selectedInvalidTransactionCount > 0"
-                       :append-icon="!submitting ? icons.next : undefined" @click="submit"
+                       :append-icon="!submitting ? mdiArrowRight : undefined" @click="submit"
                        v-if="currentStep === 'checkData'">
                     {{ tt('Import') }}
                     <v-progress-circular indeterminate size="22" class="ml-2" v-if="submitting"></v-progress-circular>
                 </v-btn>
                 <v-btn color="secondary" variant="tonal"
-                       :append-icon="icons.complete"
+                       :append-icon="mdiCheck"
                        @click="close(true)"
                        v-if="currentStep === 'finalResult'">{{ tt('Close') }}</v-btn>
             </div>
@@ -710,25 +710,6 @@ const transactionsStore = useTransactionsStore();
 const overviewStore = useOverviewStore();
 const statisticsStore = useStatisticsStore();
 
-const icons = {
-    filter: mdiFilterOutline,
-    checked: mdiCheck,
-    more: mdiDotsVertical,
-    document: mdiHelpCircleOutline,
-    replace: mdiFindReplace,
-    previous: mdiClose,
-    next: mdiArrowRight,
-    complete: mdiCheck,
-    select: mdiSelect,
-    selectAll: mdiSelectAll,
-    selectNone: mdiSelect,
-    selectInverse: mdiSelectInverse,
-    edit: mdiPencilOutline,
-    arrowRight: mdiArrowRight,
-    alert: mdiAlertOutline,
-    tag: mdiPound
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const batchReplaceDialog = useTemplateRef<BatchReplaceDialogType>('batchReplaceDialog');
diff --git a/src/views/desktop/user/UserSettingsPage.vue b/src/views/desktop/user/UserSettingsPage.vue
index 10d53925..8f9d0ebb 100644
--- a/src/views/desktop/user/UserSettingsPage.vue
+++ b/src/views/desktop/user/UserSettingsPage.vue
@@ -2,19 +2,19 @@
     <div>
         <v-tabs show-arrows v-model="activeTab">
             <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
-                <v-icon size="20" start :icon="icons.basicSetting"/>
+                <v-icon size="20" start :icon="mdiAccountOutline"/>
                 {{ tt('Basic') }}
             </v-tab>
             <v-tab value="securitySetting" @click="pushRouter('securitySetting')">
-                <v-icon size="20" start :icon="icons.securitySetting"/>
+                <v-icon size="20" start :icon="mdiLockOpenOutline"/>
                 {{ tt('Security') }}
             </v-tab>
             <v-tab value="twoFactorSetting" @click="pushRouter('twoFactorSetting')">
-                <v-icon size="20" start :icon="icons.twoFactorSetting"/>
+                <v-icon size="20" start :icon="mdiOnepassword"/>
                 {{ tt('Two-Factor Authentication') }}
             </v-tab>
             <v-tab value="dataManagementSetting" @click="pushRouter('dataManagementSetting')">
-                <v-icon size="20" start :icon="icons.dataManagementSetting"/>
+                <v-icon size="20" start :icon="mdiDatabaseCogOutline"/>
                 {{ tt('Data Management') }}
             </v-tab>
         </v-tabs>
@@ -74,13 +74,6 @@ const ALL_TABS: string[] = [
     'dataManagementSetting'
 ];
 
-const icons = {
-    basicSetting: mdiAccountOutline,
-    securitySetting: mdiLockOpenOutline,
-    twoFactorSetting: mdiOnepassword,
-    dataManagementSetting: mdiDatabaseCogOutline
-};
-
 const twoFactorSettingTab = useTemplateRef<TwoFactorSettingTabType>('twoFactorSettingTab');
 
 const activeTab = ref<string>((() => {
diff --git a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
index 5a9b6f43..417a336d 100644
--- a/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
@@ -14,13 +14,13 @@
                         <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
                             <template #placeholder>
                                 <div class="d-flex align-center justify-center fill-height bg-light-primary">
-                                    <v-icon color="primary" size="48" class="user-profile-avatar-placeholder" :icon="icons.user"/>
+                                    <v-icon color="primary" size="48" class="user-profile-avatar-placeholder" :icon="mdiAccount"/>
                                 </div>
                             </template>
                         </v-img>
-                        <v-icon size="48" class="user-profile-avatar-placeholder" :icon="icons.user" v-else-if="!currentUserAvatar"/>
+                        <v-icon size="48" class="user-profile-avatar-placeholder" :icon="mdiAccount" v-else-if="!currentUserAvatar"/>
                         <div class="avatar-edit-icon" v-if="avatarProvider === 'internal'">
-                            <v-icon size="48" :icon="icons.pencil"/>
+                            <v-icon size="48" :icon="mdiAccountEditOutline"/>
                         </div>
                         <v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="avatarProvider === 'internal'">
                             <v-list>
@@ -399,11 +399,6 @@ const rootStore = useRootStore();
 const userStore = useUserStore();
 const accountsStore = useAccountsStore();
 
-const icons = {
-    user: mdiAccount,
-    pencil: mdiAccountEditOutline,
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const avatarInput = useTemplateRef<HTMLInputElement>('avatarInput');
diff --git a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
index 1dd8d0f5..64f944e4 100644
--- a/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserDataManagementSettingTab.vue
@@ -10,7 +10,7 @@
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
-                            <v-icon :icon="icons.refresh" size="24" />
+                            <v-icon :icon="mdiRefresh" size="24" />
                             <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                     </div>
@@ -22,43 +22,43 @@
                             {
                                 title: 'Transactions',
                                 count: displayDataStatistics ? displayDataStatistics.totalTransactionCount : '-',
-                                icon: icons.transactions,
+                                icon: mdiListBoxOutline,
                                 color: 'info-darken-1'
                             },
                             {
                                 title: 'Accounts',
                                 count: displayDataStatistics ? displayDataStatistics.totalAccountCount : '-',
-                                icon: icons.accounts,
+                                icon: mdiCreditCardOutline,
                                 color: 'primary'
                             },
                             {
                                 title: 'Transaction Categories',
                                 count: displayDataStatistics ? displayDataStatistics.totalTransactionCategoryCount : '-',
-                                icon: icons.categories,
+                                icon: mdiViewDashboardOutline,
                                 color: 'teal'
                             },
                             {
                                 title: 'Transaction Tags',
                                 count: displayDataStatistics ? displayDataStatistics.totalTransactionTagCount : '-',
-                                icon: icons.tags,
+                                icon: mdiTagOutline,
                                 color: 'secondary'
                             },
                             {
                                 title: 'Transaction Pictures',
                                 count: displayDataStatistics ? displayDataStatistics.totalTransactionPictureCount : '-',
-                                icon: icons.pictures,
+                                icon: mdiImage,
                                 color: 'error-darken-1'
                             },
                             {
                                 title: 'Transaction Templates',
                                 count: displayDataStatistics ? displayDataStatistics.totalTransactionTemplateCount : '-',
-                                icon: icons.templates,
+                                icon: mdiClipboardTextOutline,
                                 color: 'secondary-darken-1'
                             },
                             {
                                 title: 'Scheduled Transactions',
                                 count: displayDataStatistics ? displayDataStatistics.totalScheduledTransactionCount : '-',
-                                icon: icons.scheduledTransactions,
+                                icon: mdiClipboardTextClockOutline,
                                 color: 'success-darken-1'
                             }
                         ]">
@@ -117,7 +117,7 @@
                 <v-form>
                     <v-card-text class="py-0">
                     <span class="text-body-1 text-error">
-                        <v-icon :icon="icons.alert"/>
+                        <v-icon :icon="mdiAlert"/>
                         {{ tt('You CANNOT undo this action. This will clear your accounts, categories, tags and transactions data. Please enter your current password to confirm.') }}
                     </span>
                     </v-card-text>
@@ -192,18 +192,6 @@ const { dataStatistics, displayDataStatistics, getExportFileName } = useDataMana
 const rootStore = useRootStore();
 const userStore = useUserStore();
 
-const icons = {
-    refresh: mdiRefresh,
-    transactions: mdiListBoxOutline,
-    accounts: mdiCreditCardOutline,
-    categories: mdiViewDashboardOutline,
-    tags: mdiTagOutline,
-    pictures: mdiImage,
-    templates: mdiClipboardTextOutline,
-    scheduledTransactions: mdiClipboardTextClockOutline,
-    alert: mdiAlert
-};
-
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
diff --git a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
index 2667c768..ddaa73e6 100644
--- a/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserSecuritySettingTab.vue
@@ -73,7 +73,7 @@
                             <template #loader>
                                 <v-progress-circular indeterminate size="20"/>
                             </template>
-                            <v-icon :icon="icons.refresh" size="24" />
+                            <v-icon :icon="mdiRefresh" size="24" />
                             <v-tooltip activator="parent">{{ tt('Refresh') }}</v-tooltip>
                         </v-btn>
                     </div>
@@ -176,10 +176,6 @@ const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 
-const icons = {
-    refresh: mdiRefresh
-};
-
 const newPasswordInput = useTemplateRef<VTextField>('newPasswordInput');
 const confirmPasswordInput = useTemplateRef<VTextField>('confirmPasswordInput');
 const confirmDialog = useTemplateRef<ConfirmDialogType>('confirmDialog');
diff --git a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
index 4a314a8d..a668f6b3 100644
--- a/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
+++ b/src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue
@@ -84,7 +84,7 @@
                     <v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
                            density="compact" color="default" variant="text" size="24"
                            class="ml-2" :icon="true">
-                        <v-icon :icon="icons.copy" size="20" />
+                        <v-icon :icon="mdiContentCopy" size="20" />
                         <v-tooltip activator="parent">{{ tt('Copy') }}</v-tooltip>
                     </v-btn>
                 </template>
@@ -123,10 +123,6 @@ const { tt } = useI18n();
 
 const twoFactorAuthStore = useTwoFactorAuthStore();
 
-const icons = {
-    copy: mdiContentCopy
-};
-
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 const iconCopyToClipboard = useTemplateRef<unknown>('copyToClipboardIcon');