From b29189f0c3dddb35cbfa6ff1ebc06ffa933b08b5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 23 Mar 2023 18:38:21 +0530
Subject: [PATCH] refactor: move all icons to iconMap (WIP)

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/account/ResetPassword.vue      |  4 +-
 .../nc-gui/components/account/UsersModal.vue  |  2 +-
 packages/nc-gui/components/cell/GeoData.vue   | 15 +++--
 .../nc-gui/components/cell/MultiSelect.vue    |  3 +-
 .../nc-gui/components/cell/SingleSelect.vue   |  3 +-
 .../components/cell/attachment/Image.vue      |  2 +-
 .../dashboard/settings/DataSources.vue        |  2 +-
 .../dashboard/settings/Metadata.vue           |  2 +-
 .../components/dashboard/settings/Modal.vue   |  2 +-
 .../nc-gui/components/dlg/QuickImport.vue     |  6 +-
 .../nc-gui/components/general/PreviewAs.vue   |  2 +-
 .../nc-gui/components/smartsheet/Gallery.vue  |  3 +-
 .../nc-gui/components/smartsheet/Kanban.vue   |  2 +-
 .../components/smartsheet/Pagination.vue      |  4 +-
 .../smartsheet/column/FormulaOptions.vue      |  5 +-
 .../smartsheet/column/SelectOptions.vue       |  3 +-
 .../smartsheet/expanded-form/Header.vue       | 15 ++---
 .../smartsheet/expanded-form/index.vue        |  5 +-
 .../components/smartsheet/header/Menu.vue     | 12 ++--
 .../smartsheet/sidebar/RenameableMenuItem.vue |  6 +-
 .../sidebar/toolbar/DeleteCache.vue           |  4 +-
 .../sidebar/toolbar/ExportCache.vue           |  4 +-
 .../components/smartsheet/toolbar/Export.vue  |  8 ++-
 .../smartsheet/toolbar/FieldsMenu.vue         |  4 +-
 .../toolbar/KanbanStackEditOrAdd.vue          |  5 +-
 .../smartsheet/toolbar/MappedBy.vue           |  3 +-
 .../smartsheet/toolbar/QrScannerButton.vue    |  4 +-
 .../smartsheet/toolbar/ShareView.vue          |  2 +-
 .../smartsheet/toolbar/StackedBy.vue          |  3 +-
 .../components/tabs/auth/UserManagement.vue   |  8 +--
 .../tabs/auth/user-management/UsersModal.vue  |  2 +-
 .../nc-gui/components/template/Editor.vue     | 26 ++++++---
 .../virtual-cell/components/ItemChip.vue      |  7 ++-
 .../components/ListChildItems.vue             |  5 +-
 packages/nc-gui/components/webhook/Editor.vue |  7 ++-
 packages/nc-gui/layouts/base.vue              |  4 +-
 .../pages/[projectType]/[projectId]/index.vue |  3 +-
 .../form/[viewId]/index/index.vue             |  4 +-
 .../form/[viewId]/index/survey.vue            |  9 ++-
 packages/nc-gui/pages/forgot-password.vue     |  4 +-
 .../nc-gui/pages/index/index/[projectId].vue  |  3 +-
 .../pages/index/index/create-external.vue     |  2 +-
 packages/nc-gui/pages/index/index/create.vue  |  3 +-
 packages/nc-gui/pages/index/index/index.vue   | 10 +++-
 packages/nc-gui/pages/index/index/user.vue    |  6 +-
 packages/nc-gui/pages/projects/index.vue      |  3 +-
 .../nc-gui/pages/projects/index/index.vue     |  9 +--
 packages/nc-gui/pages/projects/index/list.vue |  7 ++-
 packages/nc-gui/pages/signin.vue              | 15 ++++-
 packages/nc-gui/utils/iconUtils.ts            | 57 ++++++++++++++++++-
 50 files changed, 223 insertions(+), 106 deletions(-)

diff --git a/packages/nc-gui/components/account/ResetPassword.vue b/packages/nc-gui/components/account/ResetPassword.vue
index dc3d17fb55..af0c8c3f33 100644
--- a/packages/nc-gui/components/account/ResetPassword.vue
+++ b/packages/nc-gui/components/account/ResetPassword.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports'
+import { iconMap, message, navigateTo, reactive, ref, useApi, useGlobal, useI18n } from '#imports'
 
 const { api, error } = useApi({ useGlobalInstance: true })
 
@@ -121,7 +121,7 @@ const resetError = () => {
       <div class="text-center">
         <button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
-            <MdiKeyChange />
+            <component :is="iconMap.passwordChange" />
             {{ $t('activity.changePwd') }}
           </span>
         </button>
diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index 3c20ef0bc4..5e08b076c6 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -166,7 +166,7 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
         <div v-else class="flex flex-col pb-4">
           <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
-            <MdiAccountOutline />
+            <component :is="iconMap.account" />
             <div class="text-xs ml-0.5 mt-0.5">{{ $t('activity.inviteUser') }}</div>
           </div>
 
diff --git a/packages/nc-gui/components/cell/GeoData.vue b/packages/nc-gui/components/cell/GeoData.vue
index ee93f533c5..68a3cdcf11 100644
--- a/packages/nc-gui/components/cell/GeoData.vue
+++ b/packages/nc-gui/components/cell/GeoData.vue
@@ -89,7 +89,10 @@ const openInOSM = () => {
       class="group cursor-pointer flex gap-1 items-center mx-auto max-w-64 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
     >
       <div class="flex items-center gap-2" data-testid="nc-geo-data-set-location-button">
-        <MdiMapMarker class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]" />
+        <component
+          :is="iconMap.mapMarker"
+          class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
+        />
         <div class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs">
           {{ latLongStr }}
         </div>
@@ -141,14 +144,18 @@ const openInOSM = () => {
               :class="{ 'animate-infinite animate-spin text-gray-500': isLoading }"
             />
             <a-button class="ml-2" @click="onClickSetCurrentLocation"
-              ><MdiGpsFixed class="mr-2" />{{ $t('labels.currentLocation') }}</a-button
+              ><component :is="iconMap.currentLocation" class="mr-2" />{{ $t('labels.currentLocation') }}</a-button
             >
           </div>
         </a-form-item>
         <a-form-item v-if="vModel">
           <div class="mr-2 flex flex-row items-end gap-1 text-left">
-            <a-button @click="openInOSM"><MdiOpenInNew class="mr-2" />{{ $t('activity.map.openInOpenStreetMap') }}</a-button>
-            <a-button @click="openInGoogleMaps"><MdiOpenInNew class="mr-2" />{{ $t('activity.map.openInGoogleMaps') }}</a-button>
+            <a-button @click="openInOSM"
+              ><component :is="iconMap.openInNew" class="mr-2" />{{ $t('activity.map.openInOpenStreetMap') }}</a-button
+            >
+            <a-button @click="openInGoogleMaps"
+              ><component :is="iconMap.openInNew" class="mr-2" />{{ $t('activity.map.openInGoogleMaps') }}</a-button
+            >
           </div>
         </a-form-item>
         <a-form-item>
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index cbe8aef82a..d77f29ba47 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -14,6 +14,7 @@ import {
   enumColor,
   extractSdkResponseErrorMsg,
   h,
+  iconMap,
   inject,
   isDrawerOrModalExist,
   onMounted,
@@ -367,7 +368,7 @@ useEventListener(document, 'click', handleClose, true)
         :value="searchVal"
       >
         <div class="flex gap-2 text-gray-500 items-center h-full">
-          <MdiPlusThick class="min-w-4" />
+          <component :is="iconMap.plusThick" class="min-w-4" />
           <div class="text-xs whitespace-normal">
             Create new option named <strong>{{ searchVal }}</strong>
           </div>
diff --git a/packages/nc-gui/components/cell/SingleSelect.vue b/packages/nc-gui/components/cell/SingleSelect.vue
index dcdb5b3b28..51c1554bb2 100644
--- a/packages/nc-gui/components/cell/SingleSelect.vue
+++ b/packages/nc-gui/components/cell/SingleSelect.vue
@@ -15,6 +15,7 @@ import {
   computed,
   enumColor,
   extractSdkResponseErrorMsg,
+  iconMap,
   inject,
   isDrawerOrModalExist,
   ref,
@@ -295,7 +296,7 @@ useEventListener(document, 'click', handleClose, true)
         :value="searchVal"
       >
         <div class="flex gap-2 text-gray-500 items-center h-full">
-          <MdiPlusThick class="min-w-4" />
+          <component :is="iconMap.plusThick" class="min-w-4" />
           <div class="text-xs whitespace-normal">
             Create new option named <strong>{{ searchVal }}</strong>
           </div>
diff --git a/packages/nc-gui/components/cell/attachment/Image.vue b/packages/nc-gui/components/cell/attachment/Image.vue
index 94a1271a67..8c3669be0f 100644
--- a/packages/nc-gui/components/cell/attachment/Image.vue
+++ b/packages/nc-gui/components/cell/attachment/Image.vue
@@ -21,5 +21,5 @@ const onError = () => index.value++
     quality="75"
     @error="onError"
   />
-  <MdiFileImageBox v-else />
+  <component :is="iconMap.imagePlaceholder" v-else />
 </template>
diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 9eff5b0605..5339cd2fae 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/packages/nc-gui/components/dashboard/settings/DataSources.vue
@@ -308,7 +308,7 @@ watch(
             <template #item="{ element: base, index }">
               <div v-if="index !== 0" class="ds-table-row border-gray-200">
                 <div class="ds-table-col ds-table-name">
-                  <MdiDragVertical v-if="sources.length > 2" small class="ds-table-handle" />
+                  <component :is="iconMap.dragVertical" v-if="sources.length > 2" small class="ds-table-handle" />
                   <div class="flex items-center gap-1">
                     <GeneralBaseLogo :base-type="base.type" />
                     {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
diff --git a/packages/nc-gui/components/dashboard/settings/Metadata.vue b/packages/nc-gui/components/dashboard/settings/Metadata.vue
index bf32c7ffcf..0dccc37a2f 100644
--- a/packages/nc-gui/components/dashboard/settings/Metadata.vue
+++ b/packages/nc-gui/components/dashboard/settings/Metadata.vue
@@ -135,7 +135,7 @@ const columns = [
       <div v-if="isDifferent">
         <a-button v-e="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
           <div class="flex items-center gap-2">
-            <MdiDatabaseSync />
+            <component :is="iconMap.databaseSync" />
             {{ $t('activity.metaSync') }}
           </div>
         </a-button>
diff --git a/packages/nc-gui/components/dashboard/settings/Modal.vue b/packages/nc-gui/components/dashboard/settings/Modal.vue
index cae9b8d770..4304896c0d 100644
--- a/packages/nc-gui/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui/components/dashboard/settings/Modal.vue
@@ -227,7 +227,7 @@ watch(
                 @click="vDataState = DataSourcesSubTab.New"
               >
                 <div v-if="vDataState === ''" class="flex items-center gap-2 text-primary font-light">
-                  <MdiDatabasePlusOutline class="text-lg group-hover:text-accent" />
+                  <component :is="iconMap.plusCircle" class="text-lg group-hover:text-accent" />
                   New
                 </div>
               </a-button>
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index 3e98fe5d7a..9b4bd7e86a 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -380,7 +380,7 @@ const beforeUpload = (file: UploadFile) => {
               <template #tab>
                 <!--              Upload -->
                 <div class="flex items-center gap-2">
-                  <MdiFileUploadOutline />
+                  <component :is="iconMap.fileUpload" />
                   {{ $t('general.upload') }}
                 </div>
               </template>
@@ -399,7 +399,7 @@ const beforeUpload = (file: UploadFile) => {
                   @change="handleChange"
                   @reject="rejectDrop"
                 >
-                  <MdiFilePlusOutline size="large" />
+                  <component :is="iconMap.plusCircle" size="large" />
 
                   <!-- Click or drag file to this area to upload -->
                   <p class="ant-upload-text">{{ $t('msg.info.import.clickOrDrag') }}</p>
@@ -427,7 +427,7 @@ const beforeUpload = (file: UploadFile) => {
             <a-tab-pane v-else key="urlTab" :closable="false">
               <template #tab>
                 <span class="flex items-center gap-2">
-                  <MdiLinkVariant />
+                  <component :is="iconMap.link" />
                   URL
                 </span>
               </template>
diff --git a/packages/nc-gui/components/general/PreviewAs.vue b/packages/nc-gui/components/general/PreviewAs.vue
index b2df27a297..6ac7054034 100644
--- a/packages/nc-gui/components/general/PreviewAs.vue
+++ b/packages/nc-gui/components/general/PreviewAs.vue
@@ -64,7 +64,7 @@ watch(previewAs, (newRole) => {
     class="floating-reset-btn nc-floating-preview-btn p-4"
     :style="{ top: position.y, left: position.x }"
   >
-    <MdiDrag class="cursor-move text-white" @mousedown="mouseDown" />
+    <component :is="iconMap.drag" class="cursor-move text-white" @mousedown="mouseDown" />
 
     <div class="divider" />
 
diff --git a/packages/nc-gui/components/smartsheet/Gallery.vue b/packages/nc-gui/components/smartsheet/Gallery.vue
index 480b2b7bbb..f4f4a160f4 100644
--- a/packages/nc-gui/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui/components/smartsheet/Gallery.vue
@@ -17,6 +17,7 @@ import {
   computed,
   createEventHook,
   extractPkFromRow,
+  iconMap,
   inject,
   isImage,
   isLTAR,
@@ -262,7 +263,7 @@ watch(view, async (nextView) => {
                   </template>
                 </a-carousel>
 
-                <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
+                <component :is="iconMap.imagePlaceholder" v-else class="w-full h-48 my-4 text-cool-gray-200" />
               </template>
 
               <div v-for="col in fieldsWithoutCover" :key="`record-${record.row.id}-${col.id}`">
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index 3781b35a4d..ab7780efcb 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -471,7 +471,7 @@ watch(view, async (nextView) => {
                                     </template>
                                   </a-carousel>
 
-                                  <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
+                                  <component :is="iconMap.imagePlaceholder" v-else class="w-full h-48 my-4 text-cool-gray-200" />
                                 </template>
                                 <div
                                   v-for="col in fieldsWithoutCover"
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index e84c094bf2..559601f47b 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChangePageInj, PaginationDataInj, computed, inject } from '#imports'
+import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports'
 
 const paginatedData = inject(PaginationDataInj)!
 
@@ -39,7 +39,7 @@ const page = computed({
       <span class="text-xs" style="white-space: nowrap"> Change page:</span>
       <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
         <template #suffix>
-          <MdiKeyboardReturn class="mt-1" @click="changePage(page)" />
+          <component :is="iconMap.returnKey" class="mt-1" @click="changePage(page)" />
         </template>
       </a-input>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
index 1dea646550..beb16b58be 100644
--- a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
@@ -12,6 +12,7 @@ import {
   formulas,
   getUIDTIcon,
   getWordUntilCaret,
+  iconMap,
   insertAtCursor,
   onMounted,
   useColumnCreateStoreOrThrow,
@@ -742,9 +743,9 @@ onMounted(() => {
               </template>
 
               <template #avatar>
-                <mdi-function v-if="item.type === 'function'" class="text-lg" />
+                <component :is="iconMap.function" v-if="item.type === 'function'" class="text-lg" />
 
-                <mdi-calculator v-if="item.type === 'op'" class="text-lg" />
+                <component :is="iconMap.calculator" v-if="item.type === 'op'" class="text-lg" />
 
                 <component :is="item.icon" v-if="item.type === 'column'" class="text-lg" />
               </template>
diff --git a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
index dbda874e85..8c8a879ee8 100644
--- a/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SelectOptions.vue
@@ -172,7 +172,8 @@ watch(inputs, () => {
               :data-testid="`select-column-option-${index}`"
               :class="{ removed: element.status === 'remove' }"
             >
-              <MdiDragVertical
+              <component
+                :is="iconMap.dragVertical"
                 v-if="!isKanban"
                 small
                 class="nc-child-draggable-icon handle"
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index 71a0b4b67e..2a60c28eeb 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -120,7 +120,8 @@ const onConfirmDeleteRowClick = async () => {
       <template #title>
         <div class="text-center w-full">{{ $t('activity.toggleCommentsDraw') }}</div>
       </template>
-      <MdiCommentTextOutline
+      <component
+        :is="iconMap.comment"
         v-if="isUIAllowed('rowComments') && !isNew"
         v-e="['c:row-expand:comment-toggle']"
         class="nc-icon-transition cursor-pointer select-none nc-toggle-comments text-gray-500 mx-1 min-w-4"
@@ -129,30 +130,30 @@ const onConfirmDeleteRowClick = async () => {
     </a-tooltip>
 
     <a-dropdown-button class="nc-expand-form-save-btn" type="primary" :disabled="!isUIAllowed('tableRowUpdate')" @click="save">
-      <template #icon><MdiMenuDown /></template>
+      <template #icon><component :is="iconMap.arrowDown" /></template>
 
       <template #overlay>
         <a-menu class="nc-expand-form-save-dropdown-menu">
           <a-menu-item key="0" class="!py-2 flex gap-2" @click="saveRowAndStay = 0">
             <div class="flex items-center">
-              <MdiContentSave class="mr-1" />
+              <component :is="iconMap.contentSaveExit" class="mr-1" />
               {{ $t('activity.saveAndExit') }}
             </div>
           </a-menu-item>
           <a-menu-item key="1" class="!py-2 flex gap-2 items-center" @click="saveRowAndStay = 1">
             <div class="flex items-center">
-              <MdiContentSaveEdit class="mr-1" />
+              <component :is="iconMap.contentSaveStay" class="mr-1" />
               {{ $t('activity.saveAndStay') }}
             </div>
           </a-menu-item>
         </a-menu>
       </template>
       <div v-if="saveRowAndStay === 0" class="flex items-center">
-        <MdiContentSave class="mr-1" />
+        <component :is="iconMap.contentSaveExit" class="mr-1" />
         {{ $t('activity.saveAndExit') }}
       </div>
       <div v-if="saveRowAndStay === 1" class="flex items-center">
-        <MdiContentSaveEdit class="mr-1" />
+        <component :is="iconMap.contentSaveStay" class="mr-1" />
         {{ $t('activity.saveAndStay') }}
       </div>
     </a-dropdown-button>
@@ -163,7 +164,7 @@ const onConfirmDeleteRowClick = async () => {
         <a-menu>
           <a-menu-item v-if="!isNew" @click="loadRow">
             <div v-e="['c:row-expand:reload']" class="py-2 flex gap-2 items-center">
-              <mdi-reload class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" />
+              <component :is="iconMap.reload" class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 min-w-4" />
               {{ $t('general.reload') }}
             </div>
           </a-menu-item>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index 2a59df5ca6..d6defa61f5 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -11,6 +11,7 @@ import {
   ReloadRowDataHookInj,
   computedInject,
   createEventHook,
+  iconMap,
   inject,
   message,
   provide,
@@ -301,7 +302,7 @@ export default {
 
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '←']" />
               </template>
-              <MdiChevronLeft class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
+              <component :is="iconMap.chevronLeft" class="cursor-pointer nc-prev-arrow" @click="$emit('prev')" />
             </a-tooltip>
 
             <a-tooltip v-if="!props.lastRow" placement="bottom">
@@ -309,7 +310,7 @@ export default {
                 {{ $t('labels.nextRow') }}
                 <GeneralShortcutLabel class="justify-center" :keys="['Alt', '→']" />
               </template>
-              <MdiChevronRight class="cursor-pointer nc-next-arrow" @click="onNext" />
+              <component :is="iconMap.chevronRight" class="cursor-pointer nc-next-arrow" @click="onNext" />
             </a-tooltip>
           </template>
           <div class="w-[500px] mx-auto">
diff --git a/packages/nc-gui/components/smartsheet/header/Menu.vue b/packages/nc-gui/components/smartsheet/header/Menu.vue
index 69394f419c..9547b9be68 100644
--- a/packages/nc-gui/components/smartsheet/header/Menu.vue
+++ b/packages/nc-gui/components/smartsheet/header/Menu.vue
@@ -232,14 +232,14 @@ const hideField = async () => {
           <a-divider class="!my-0" />
           <a-menu-item @click="sortByColumn('asc')">
             <div v-e="['a:field:sort', { dir: 'asc' }]" class="nc-column-insert-after nc-header-menu-item">
-              <MdiSortAscending class="text-primary" />
+              <component :is="iconMap.sortAsc" class="text-primary" />
               <!-- Sort Ascending -->
               {{ $t('general.sortAsc') }}
             </div>
           </a-menu-item>
           <a-menu-item @click="sortByColumn('desc')">
             <div v-e="['a:field:sort', { dir: 'desc' }]" class="nc-column-insert-before nc-header-menu-item">
-              <MdiSortDescending class="text-primary" />
+              <component :is="iconMap.sortDesc" class="text-primary" />
               <!-- Sort Descending -->
               {{ $t('general.sortDesc') }}
             </div>
@@ -261,21 +261,21 @@ const hideField = async () => {
           @click="duplicateColumn"
         >
           <div v-e="['a:field:duplicate']" class="nc-column-duplicate nc-header-menu-item">
-            <MdiFileReplaceOutline class="text-primary" />
+            <component :is="iconMap.duplicate" class="text-primary" />
             <!-- Duplicate -->
             {{ t('general.duplicate') }}
           </div>
         </a-menu-item>
         <a-menu-item @click="addColumn()">
           <div v-e="['a:field:insert:after']" class="nc-column-insert-after nc-header-menu-item">
-            <MdiTableColumnPlusAfter class="text-primary" />
+            <component :is="iconMap.colInsertAfter" class="text-primary" />
             <!-- Insert After -->
             {{ t('general.insertAfter') }}
           </div>
         </a-menu-item>
         <a-menu-item v-if="!column?.pv" @click="addColumn(true)">
           <div v-e="['a:field:insert:before']" class="nc-column-insert-before nc-header-menu-item">
-            <MdiTableColumnPlusBefore class="text-primary" />
+            <component :is="iconMap.colInsertBefore" class="text-primary" />
             <!-- Insert Before -->
             {{ t('general.insertBefore') }}
           </div>
@@ -284,7 +284,7 @@ const hideField = async () => {
 
         <a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue">
           <div class="nc-column-set-primary nc-header-menu-item">
-            <MdiStar class="text-primary" />
+            <component :is="iconMap.star" class="text-primary" />
 
             <!--       todo : tooltip -->
             <!-- Set as Display value -->
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 946caba1bb..2f80349c5b 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -222,7 +222,11 @@ function onStopEdit() {
                 {{ $t('activity.deleteView') }}
               </template>
 
-              <MdiTrashCan class="!hidden !group-hover:block text-red-500 nc-view-delete-icon" @click.stop="onDelete" />
+              <component
+                :is="iconMap.delete"
+                class="!hidden !group-hover:block text-red-500 nc-view-delete-icon"
+                @click.stop="onDelete"
+              />
             </a-tooltip>
           </template>
         </div>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteCache.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteCache.vue
index 004f0e3f70..16ebfd809c 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteCache.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/DeleteCache.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { message, useApi, useI18n } from '#imports'
+import { iconMap, message, useApi, useI18n } from '#imports'
 
 const { t } = useI18n()
 
@@ -22,6 +22,6 @@ async function deleteCache() {
       <span> Delete Cache </span>
     </template>
 
-    <mdi-delete class="cursor-pointer" @click="deleteCache" />
+    <component :is="iconMap.delete" class="cursor-pointer" @click="deleteCache" />
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/ExportCache.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/ExportCache.vue
index 87eb1f6224..aea3039b6b 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/ExportCache.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/ExportCache.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { message, useApi, useI18n } from '#imports'
+import { iconMap, message, useApi, useI18n } from '#imports'
 
 const { t } = useI18n()
 
@@ -36,6 +36,6 @@ async function exportCache() {
       <span> Export Cache </span>
     </template>
 
-    <mdi-export class="cursor-pointer" @click="exportCache" />
+    <component :is="iconMap.export" class="cursor-pointer" @click="exportCache" />
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Export.vue b/packages/nc-gui/components/smartsheet/toolbar/Export.vue
index f38095ae97..29f49a3354 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Export.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Export.vue
@@ -1,10 +1,14 @@
+<script lang="ts" setup>
+import { iconMap } from '#imports'
+</script>
+
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
     <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
-        <MdiDownload class="group-hover:text-accent text-gray-500" />
+        <component :is="iconMap.download" class="group-hover:text-accent text-gray-500" />
         <span class="text-capitalize !text-sm font-weight-normal">{{ $t('general.download') }}</span>
-        <MdiMenuDown class="text-grey" />
+        <component :is="iconMap.arrowDown" class="text-grey" />
       </div>
     </a-button>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index e5a6781a46..fe0e65214c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -219,7 +219,7 @@ useMenuCloseOnEsc(open)
 
                 <div class="flex-1" />
 
-                <MdiDrag class="cursor-move" />
+                <component :is="iconMap.drag" class="cursor-move" />
               </div>
             </template>
             <template v-if="activeView?.type === ViewTypes.GRID" #header>
@@ -235,7 +235,7 @@ useMenuCloseOnEsc(open)
                     <span class="text-sm">Display Value</span>
                   </template>
 
-                  <MdiTableKey class="text-xs" />
+                  <component :is="iconMap.tableKey" class="text-xs" />
                 </a-tooltip>
 
                 <div class="flex items-center px-[8px]">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
index 7a3f3a35a4..bfc7ea706c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/KanbanStackEditOrAdd.vue
@@ -3,6 +3,7 @@ import {
   IsKanbanInj,
   IsLockedInj,
   IsPublicInj,
+  iconMap,
   inject,
   provide,
   ref,
@@ -44,11 +45,11 @@ provide(IsKanbanInj, ref(true))
         :disabled="isLocked"
       >
         <div class="flex items-center gap-1">
-          <MdiPlusCircleOutline />
+          <component :is="iconMap.plusCircle" />
           <span class="text-capitalize !text-sm font-weight-normal">
             {{ $t('activity.kanban.addOrEditStack') }}
           </span>
-          <MdiMenuDown class="text-grey" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
         </div>
       </a-button>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
index cc1b016848..c005c576e9 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/MappedBy.vue
@@ -9,6 +9,7 @@ import {
   MetaInj,
   ReloadViewDataHookInj,
   computed,
+  iconMap,
   inject,
   ref,
   useViewColumns,
@@ -84,7 +85,7 @@ const handleChange = () => {
             {{ $t('activity.map.mappedBy') }}
             <span class="font-bold">{{ geoDataFieldColumn?.title }}</span>
           </span>
-          <MdiMenuDown class="text-grey" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
         </div>
       </a-button>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue b/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue
index 25f8a1729f..3bba7e71dc 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue
@@ -4,7 +4,7 @@ import { ref } from 'vue'
 import { StreamBarcodeReader } from 'vue-barcode-reader'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { NOCO, storeToRefs } from '#imports'
+import { NOCO, iconMap, storeToRefs } from '#imports'
 
 const meta = inject(MetaInj, ref())
 
@@ -125,7 +125,7 @@ const onDecode = async (codeValue: string) => {
   <div>
     <a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true">
       <div class="flex items-center gap-1">
-        <MdiQrcodeScan />
+        <component :is="iconMap.qrCode" />
         <span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span>
       </div>
     </a-button>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index f2c799f589..534dc1daa9 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -288,7 +288,7 @@ const copyIframeCode = async () => {
         class="flex gap-1 items-center pb-1 text-gray-500 cursor-pointer font-weight-medium mb-2 mt-4 pl-1"
         @click="copyIframeCode"
       >
-        <MdiCodeTags class="text-gray-500" />
+        <component :is="iconMap.embed" class="text-gray-500" />
         Embed this view in your site
       </div>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
index 60ce79502f..fc9079547a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/StackedBy.vue
@@ -9,6 +9,7 @@ import {
   MetaInj,
   ReloadViewDataHookInj,
   computed,
+  iconMap,
   inject,
   ref,
   useKanbanViewStoreOrThrow,
@@ -94,7 +95,7 @@ const handleChange = () => {
             {{ $t('activity.kanban.stackedBy') }}
             <span class="font-bold">{{ groupingField }}</span>
           </span>
-          <MdiMenuDown class="text-grey" />
+          <component :is="iconMap.arrowDown" class="text-grey" />
         </div>
       </a-button>
     </div>
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index 366ecba0b8..1dd5b4c037 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -245,7 +245,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
           @click="onInvite"
         >
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
-            <MdiAccountPlusOutline class="mr-1" />
+            <component :is="iconMap.accountPlus" class="mr-1" />
             <div>{{ $t('activity.inviteTeam') }}</div>
           </div>
         </a-button>
@@ -255,12 +255,12 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
     <div class="px-5">
       <div class="flex flex-row border-b-1 pb-2 px-2">
         <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
-          <EvaEmailOutline class="flex text-gray-500 -mt-0.5" />
+          <component :is="iconMap.email" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
         </div>
         <div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
-          <MdiDramaMasks class="flex text-gray-500 -mt-0.5" />
+          <component :is="iconMap.role" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div>
         </div>
@@ -350,7 +350,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
                   <a-menu-item>
                     <!--                  Resend invite Email -->
                     <div class="flex flex-row items-center py-3" @click="resendInvite(user)">
-                      <MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" />
+                      <component :is="iconMap.sendEmail" class="flex h-[1rem] text-gray-500" />
                       <div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
                     </div>
                   </a-menu-item>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index cc83012225..48386e9b86 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -192,7 +192,7 @@ watch(
         <template v-if="usersData.invitationToken">
           <div class="flex flex-col mt-1 border-b-1 pb-5">
             <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
-              <MdiAccountOutline />
+              <component :is="iconMap.account" />
               <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
             </div>
 
diff --git a/packages/nc-gui/components/template/Editor.vue b/packages/nc-gui/components/template/Editor.vue
index 3f77b4356b..214ce1da20 100644
--- a/packages/nc-gui/components/template/Editor.vue
+++ b/packages/nc-gui/components/template/Editor.vue
@@ -636,7 +636,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
         <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
-              <mdi-table class="text-primary" />
+              <component :is="iconMap.table" class="text-primary" />
               {{ table.table_name }}
             </span>
           </template>
@@ -647,7 +647,12 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                 <!-- TODO: i18n -->
                 <span>Delete Table</span>
               </template>
-              <mdi-delete-outline v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" />
+              <component
+                :is="iconMap.delete"
+                v-if="data.tables.length > 1"
+                class="text-lg mr-8"
+                @click.stop="deleteTable(tableIdx)"
+              />
             </a-tooltip>
           </template>
 
@@ -727,7 +732,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                 />
               </a-form-item>
               <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
-                <mdi-table class="text-primary" />
+                <component :is="iconMap.table" class="text-primary" />
                 {{ table.table_name }}
               </span>
             </template>
@@ -738,7 +743,12 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
                   <!-- TODO: i18n -->
                   <span>Delete Table</span>
                 </template>
-                <mdi-delete-outline v-if="data.tables.length > 1" class="text-lg mr-8" @click.stop="deleteTable(tableIdx)" />
+                <component
+                  :is="iconMap.delete"
+                  v-if="data.tables.length > 1"
+                  class="text-lg mr-8"
+                  @click.stop="deleteTable(tableIdx)"
+                />
               </a-tooltip>
             </template>
             <a-table
@@ -833,7 +843,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 
                     <a-button type="text" @click="deleteTableColumn(tableIdx, record.key)">
                       <div class="flex items-center">
-                        <mdi-delete-outline class="text-lg" />
+                        <component :is="iconMap.delete" class="text-lg" />
                       </div>
                     </a-button>
                   </a-tooltip>
@@ -850,7 +860,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 
                 <a-button class="group" @click="addNewColumnRow(tableIdx, 'Number')">
                   <div class="flex items-center">
-                    <mdi-numeric class="group-hover:!text-accent flex text-lg" />
+                    <component :is="iconMap.number" class="group-hover:!text-accent flex text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -863,7 +873,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 
                 <a-button class="group" @click="addNewColumnRow(tableIdx, 'SingleLineText')">
                   <div class="flex items-center">
-                    <mdi-alpha-a class="group-hover:!text-accent text-lg" />
+                    <component :is="iconMap.text" class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
@@ -876,7 +886,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
 
                 <a-button class="group" @click="addNewColumnRow(tableIdx, 'LongText')">
                   <div class="flex items-center">
-                    <mdi-text class="group-hover:!text-accent text-lg" />
+                    <component :is="iconMap.longText" class="group-hover:!text-accent text-lg" />
                   </div>
                 </a-button>
               </a-tooltip>
diff --git a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
index 6665dd9187..1202bd19a3 100644
--- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue
@@ -4,6 +4,7 @@ import {
   IsFormInj,
   IsLockedInj,
   ReadonlyInj,
+  iconMap,
   inject,
   ref,
   useExpandedFormDetached,
@@ -62,7 +63,11 @@ export default {
     <span class="name">{{ value }}</span>
 
     <div v-show="active || isForm" v-if="!readOnly && !isLocked && isUIAllowed('xcDatatableEditable')" class="flex items-center">
-      <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
+      <component
+        :is="iconMap.closeThick"
+        class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500"
+        @click.stop="emit('unlink')"
+      />
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
index 474f490deb..a06d8ed36f 100644
--- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
@@ -130,7 +130,7 @@ const onClick = (row: Row) => {
           @click="emit('attachRecord')"
         >
           <div class="flex items-center gap-1">
-            <MdiLinkVariant class="text-xs" type="primary" />
+            <component :is="iconMap.link" class="text-xs" type="primary" />
             Link to '
             <GeneralTableIcon :meta="relatedTableMeta" class="-mx-1 w-5" />
             {{ relatedTableMeta.title }}'
@@ -153,7 +153,8 @@ const onClick = (row: Row) => {
               </div>
 
               <div v-if="!readonly" class="flex gap-2">
-                <MdiLinkVariantRemove
+                <component
+                  :is="iconMap.linkRemove"
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   data-testid="nc-child-list-icon-unlink"
                   @click.stop="unlinkRow(row)"
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 2d46cc7726..46f5f01668 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -7,6 +7,7 @@ import {
   computed,
   extractSdkResponseErrorMsg,
   fieldRequiredValidator,
+  iconMap,
   inject,
   message,
   onMounted,
@@ -451,7 +452,7 @@ onMounted(async () => {
 
       <a-button class="nc-btn-webhook-save" type="primary" size="large" @click.prevent="saveHooks">
         <div class="flex items-center">
-          <MdiContentSave class="mr-2" />
+          <component :is="iconMap.save" class="mr-2" />
           <!-- Save -->
           {{ $t('general.save') }}
         </div>
@@ -520,9 +521,9 @@ onMounted(async () => {
             >
               <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
                 <div class="flex items-center">
-                  <MdiLink v-if="notificationOption.type === 'URL'" class="mr-2" />
+                  <component :is="iconMap.link" v-if="notificationOption.type === 'URL'" class="mr-2" />
 
-                  <MdiEmail v-if="notificationOption.type === 'Email'" class="mr-2" />
+                  <component :is="iconMap.email" v-if="notificationOption.type === 'Email'" class="mr-2" />
 
                   <MdiSlack v-if="notificationOption.type === 'Slack'" class="mr-2" />
 
diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue
index 61465fe8da..16f41326e9 100644
--- a/packages/nc-gui/layouts/base.vue
+++ b/packages/nc-gui/layouts/base.vue
@@ -89,7 +89,7 @@ hooks.hook('page:finish', () => {
               <a-menu class="!py-0 leading-8 !rounded">
                 <a-menu-item key="0" data-testid="nc-menu-accounts__user-settings" class="!rounded-t">
                   <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/account/users">
-                    <MdiAccountCircleOutline class="mt-1 group-hover:text-accent" />&nbsp;
+                    <component :is="iconMap.accountCircle" class="mt-1 group-hover:text-accent" />&nbsp;
                     <div class="prose group-hover:text-primary">
                       <div>Account</div>
                       <div class="text-xs text-gray-500">{{ email }}</div>
@@ -115,7 +115,7 @@ hooks.hook('page:finish', () => {
 
                 <a-menu-item key="1" class="!rounded-b group">
                   <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
-                    <MdiLogout class="group-hover:text-accent" />&nbsp;
+                    <component :is="iconMap.signout" class="group-hover:text-accent" />&nbsp;
 
                     <span class="prose group-hover:text-primary">
                       {{ $t('general.signOut') }}
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index f8d23b6dc6..4ccd03274e 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -316,8 +316,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   </template>
                 </a-tooltip>
                 <div v-else class="text-md font-semibold truncate capitalize">{{ project.title }}</div>
-
-                <MdiChevronDown class="min-w-[17px] group-hover:text-accent text-md" />
+                <component :is="iconMap.arrowDown" class="min-w-[17px] group-hover:text-accent text-md" />
               </template>
 
               <template v-else>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 013dd23139..b0b09b4a51 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -3,7 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { ref } from 'vue'
 import { StreamBarcodeReader } from 'vue-barcode-reader'
-import { useSharedFormStoreOrThrow } from '#imports'
+import { iconMap, useSharedFormStoreOrThrow } from '#imports'
 
 const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
   useSharedFormStoreOrThrow()
@@ -175,7 +175,7 @@ const onDecode = async (scannedCodeValue: string) => {
                         @click="showCodeScannerForFieldTitle(field.title)"
                       >
                         <div class="flex items-center gap-1">
-                          <mdi-qrcode-scan class="h-5 w-5" />
+                          <component :is="iconMap.qrCodeScan" class="h-5 w-5" />
                         </div>
                       </a-button>
                     </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 62af2ebe2a..70a4629c90 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -445,7 +445,11 @@ onMounted(() => {
               data-testid="nc-survey-form__icon-prev"
               @click="goPrevious()"
             >
-              <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
+              <component
+                :is="iconMap.chevronLeft"
+                :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'"
+                class="text-2xl md:text-md"
+              />
             </button>
           </a-tooltip>
 
@@ -464,7 +468,8 @@ onMounted(() => {
               data-testid="nc-survey-form__icon-next"
               @click="goNext()"
             >
-              <MdiChevronRight
+              <component
+                :is="iconMap.chevronRight"
                 :class="[isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent']"
                 class="text-2xl md:text-md"
               />
diff --git a/packages/nc-gui/pages/forgot-password.vue b/packages/nc-gui/pages/forgot-password.vue
index b2a419980b..b85ae4d2e1 100644
--- a/packages/nc-gui/pages/forgot-password.vue
+++ b/packages/nc-gui/pages/forgot-password.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { RuleObject } from 'ant-design-vue/es/form'
-import { definePageMeta, reactive, ref, useApi, useI18n, validateEmail } from '#imports'
+import { definePageMeta, iconMap, reactive, ref, useApi, useI18n, validateEmail } from '#imports'
 
 definePageMeta({
   requiresAuth: false,
@@ -92,7 +92,7 @@ function resetError() {
           <div class="self-center flex flex-col gap-4 items-center justify-center w-full">
             <button class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
-                <MdiLogin />
+                <component :is="iconMap.signin" />
                 {{ $t('activity.sendEmail') }}
               </span>
             </button>
diff --git a/packages/nc-gui/pages/index/index/[projectId].vue b/packages/nc-gui/pages/index/index/[projectId].vue
index deaeca840d..35862ff1e4 100644
--- a/packages/nc-gui/pages/index/index/[projectId].vue
+++ b/packages/nc-gui/pages/index/index/[projectId].vue
@@ -5,6 +5,7 @@ import type { VNodeRef } from '@vue/runtime-core'
 import type { RuleObject } from 'ant-design-vue/es/form'
 import {
   extractSdkResponseErrorMsg,
+  iconMap,
   message,
   navigateTo,
   projectTitleValidator,
@@ -65,7 +66,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
-      <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
+      <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
     </div>
 
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.editProject') }}</h1>
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 1ca14f2c50..bf5f36913b 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -371,7 +371,7 @@ onMounted(async () => {
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
-      <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
+      <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
     </div>
 
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1>
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index ce1075453e..25b4c4add2 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -6,6 +6,7 @@ import type { ProjectType } from 'nocodb-sdk'
 import {
   extractSdkResponseErrorMsg,
   generateUniqueName,
+  iconMap,
   message,
   navigateTo,
   nextTick,
@@ -77,7 +78,7 @@ onMounted(async () => {
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="navigateTo('/')"
     >
-      <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
+      <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
     </div>
 
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.createProject') }}</h1>
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index c2e7f095f9..5c047953c7 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -165,7 +165,8 @@ const copyProjectMeta = async () => {
           class="transition-all duration-200 h-full flex-0 flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
           :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
         >
-          <MdiRefresh
+          <component
+            :is="iconMap.reload"
             v-e="['a:project:refresh']"
             class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
             :class="isLoading ? '!text-primary' : ''"
@@ -260,7 +261,12 @@ const copyProjectMeta = async () => {
       <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
         <template #default="{ text, record }">
           <div class="flex items-center gap-2">
-            <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
+            <component
+              :is="iconMap.edit"
+              v-e="['c:project:edit:rename']"
+              class="nc-action-btn"
+              @click.stop="navigateTo(`/${text}`)"
+            />
 
             <component
               :is="iconMap.delete"
diff --git a/packages/nc-gui/pages/index/index/user.vue b/packages/nc-gui/pages/index/index/user.vue
index 93bbf7c46a..cb434b73f8 100644
--- a/packages/nc-gui/pages/index/index/user.vue
+++ b/packages/nc-gui/pages/index/index/user.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { RuleObject } from 'ant-design-vue/es/form'
-import { message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports'
+import { iconMap, message, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useRouter } from '#imports'
 
 const router = useRouter()
 
@@ -78,7 +78,7 @@ const resetError = () => {
       class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full cursor-pointer"
       @click="() => router.back()"
     >
-      <MdiChevronLeft class="text-black group-hover:(text-accent scale-110)" />
+      <component :is="iconMap.chevronLeft" class="text-black group-hover:(text-accent scale-110)" />
     </div>
 
     <h1 class="prose-2xl font-bold self-center my-4">{{ $t('activity.changePwd') }}</h1>
@@ -137,7 +137,7 @@ const resetError = () => {
       <div class="text-center">
         <button data-testid="nc-user-settings-form__submit" class="scaling-btn bg-opacity-100" type="submit">
           <span class="flex items-center gap-2">
-            <MdiKeyChange />
+            <component :is="iconMap.passwordChange" />
             {{ $t('activity.changePwd') }}
           </span>
         </button>
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index 8bc93b536a..9cacdd954c 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n'
 import { extractSdkResponseErrorMsg, iconMap, navigateTo, useNuxtApp, useRoute } from '#imports'
 import MaterialSymbolsFormatListBulletedRounded from '~icons/material-symbols/format-list-bulleted-rounded'
 import MaterialSymbolsGridView from '~icons/material-symbols/grid-view'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
 import MdiFolderOutline from '~icons/mdi/folder-outline'
 
 const { t } = useI18n()
@@ -85,7 +84,7 @@ const deleteProject = (project: ProjectType) => {
                 class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
                 @click="navigateTo('/project/create-external')"
               >
-                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                <component :is="iconMap.database" class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
                 <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
               </div>
             </v-list>
diff --git a/packages/nc-gui/pages/projects/index/index.vue b/packages/nc-gui/pages/projects/index/index.vue
index b999ca2696..654e988fb8 100644
--- a/packages/nc-gui/pages/projects/index/index.vue
+++ b/packages/nc-gui/pages/projects/index/index.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
 import { iconMap, navigateTo, useColors, useNuxtApp } from '#imports'
-import MdiMenuDown from '~icons/mdi/menu-down'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
-import MdiEditOutline from '~icons/mdi/edit-outline'
 
 interface Props {
   projects?: ProjectType[]
@@ -58,7 +55,7 @@ const formatTitle = (title?: string) =>
             class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2"
             @click="navigateTo('/project/create-external')"
           >
-            <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+            <component :is="iconMap.dtabase" class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
             <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
           </div>
         </v-list>
@@ -69,7 +66,7 @@ const formatTitle = (title?: string) =>
       <div class="thumbnail" :style="{ '--thumbnail-color': getColorByIndex(i) }" @click="openProject(project)">
         {{ formatTitle(project.title) }}
         <a-dropdown overlay-class-name="nc-dropdown-project-operations" @click.stop>
-          <MdiMenuDown class="menu-icon" />
+          <component :is="iconMap.arrowDown" class="menu-icon" />
           <template #overlay>
             <a-menu>
               <a-menu-item @click.stop="emit('delete-project', project)">
@@ -80,7 +77,7 @@ const formatTitle = (title?: string) =>
               </a-menu-item>
               <a-menu-item @click.stop="navigateTo(`/project/${project.id}`)">
                 <div class="grid grid-cols-6 cursor-pointer flex items-center p-2">
-                  <MdiEditOutline class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                  <component :is="iconMap.edit" class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
                   <div class="col-span-4 text-sm xl:text-md">{{ $t('general.edit') }}</div>
                 </div>
               </a-menu-item>
diff --git a/packages/nc-gui/pages/projects/index/list.vue b/packages/nc-gui/pages/projects/index/list.vue
index 3c346609eb..04af72a9ce 100644
--- a/packages/nc-gui/pages/projects/index/list.vue
+++ b/packages/nc-gui/pages/projects/index/list.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
 import { iconMap, navigateTo } from '#imports'
-import MdiEditOutline from '~icons/mdi/edit-outline'
 
 interface Props {
   projects?: ProjectType[]
@@ -42,7 +41,11 @@ const openProject = async (project: ProjectType) => {
             class="text-gray-500 hover:text-red-500 mr-2"
             @click.stop="emit('delete-project', project)"
           />
-          <MdiEditOutline class="text-gray-500 hover:text-primary mr-2" @click.stop="navigateTo(`/project/${project.id}`)" />
+          <component
+            :is="iconMap.edit"
+            class="text-gray-500 hover:text-primary mr-2"
+            @click.stop="navigateTo(`/project/${project.id}`)"
+          />
         </div>
       </div>
       <div class="col-span-3 w-full h-[1px] bg-gray-500/30" />
diff --git a/packages/nc-gui/pages/signin.vue b/packages/nc-gui/pages/signin.vue
index 6912b6eb10..b71ec6da74 100644
--- a/packages/nc-gui/pages/signin.vue
+++ b/packages/nc-gui/pages/signin.vue
@@ -1,6 +1,17 @@
 <script setup lang="ts">
 import type { RuleObject } from 'ant-design-vue/es/form'
-import { definePageMeta, navigateTo, reactive, ref, useApi, useGlobal, useI18n, useSidebar, validateEmail } from '#imports'
+import {
+  definePageMeta,
+  iconMap,
+  navigateTo,
+  reactive,
+  ref,
+  useApi,
+  useGlobal,
+  useI18n,
+  useSidebar,
+  validateEmail,
+} from '#imports'
 
 definePageMeta({
   requiresAuth: false,
@@ -114,7 +125,7 @@ function resetError() {
           <div class="self-center flex flex-col flex-wrap gap-4 items-center mt-4 justify-center">
             <button data-testid="nc-form-signin__submit" class="scaling-btn bg-opacity-100" type="submit">
               <span class="flex items-center gap-2">
-                <MdiLogin />
+                <component :is="iconMap.signin" />
                 {{ $t('general.signIn') }}
               </span>
             </button>
diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts
index de5c76a43b..f1040dbd03 100644
--- a/packages/nc-gui/utils/iconUtils.ts
+++ b/packages/nc-gui/utils/iconUtils.ts
@@ -53,7 +53,6 @@ import CalendarIcon from '~icons/ph/calendar-blank-light'
 import SingleSelectIcon from '~icons/ph/caret-circle-down-light'
 import DatetimeIcon from '~icons/ph/calendar-light'
 import GeoDataIcon from '~icons/ph/map-pin-light'
-import RatingIcon from '~icons/ph/star-light'
 import GenericIcon from '~icons/ph/square-light'
 import NumericIcon from '~icons/ph/number-square-one-light'
 import EmailIcon from '~icons/ph/envelope-light'
@@ -63,6 +62,7 @@ import DecimalIcon from '~icons/mdi/decimal'
 import DurationIcon from '~icons/ph/clock-clockwise-light'
 import PhFunctiontone from '~icons/ph/function-light'
 import PhQrCodeThin from '~icons/ph/qr-code-light'
+import MdiQrcodeScan from '~icons/mdi/qrcode-scan'
 import PhBarcodeThin from '~icons/ph/barcode-light'
 import PhCalculatorThin from '~icons/ph/calculator-light'
 import PhEyeSlashThin from '~icons/ph/eye-slash-light'
@@ -116,10 +116,50 @@ import PhCloudLightningThin from '~icons/ph/cloud-lightning-light'
 import PhListBulletsThin from '~icons/ph/list-bullets-light'
 import PhBracketsAngleThin from '~icons/ph/brackets-angle-light'
 import MdiExitToApp from '~icons/mdi/exit-to-app'
+import MdiKeyChange from '~icons/mdi/key-change'
+import MdiMapMarker from '~icons/mdi/map-marker'
+import MdiGpsFixed from '~icons/mdi/gps-fixed'
+import MdiPlusThick from '~icons/mdi/plus-thick'
+import MdiDragVertical from '~icons/mdi/drag-vertical'
+import MdiFileUploadOutline from '~icons/mdi/file-upload-outline'
+import MdiDrag from '~icons/mdi/drag'
+import MdiCommentTextOutline from '~icons/mdi/comment-text-outline'
+import MdiContentSave from '~icons/mdi/content-save'
+import MdiContentSaveEdit from '~icons/mdi/content-save-edit'
+import PhSortDescendingThin from '~icons/ph/sort-descending-light'
+import PhStar from '~icons/ph/star-light'
+import MdiTableColumnPlusAfter from '~icons/mdi/table-column-plus-after'
+import MdiTableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
+import PhExportLight from '~icons/ph/export-light'
+import MdiTableKey from '~icons/mdi/table-key'
+import MdiDramaMasks from '~icons/mdi/drama-masks'
+import MdiEmailArrowRightOutline from '~icons/mdi/email-arrow-right-outline'
+import MdiCloseThick from '~icons/mdi/close-thick'
+import MdiLinkVariantRemove from '~icons/mdi/link-variant-remove'
+import MdiChevronLeft from '~icons/mdi/chevron-left'
+import MdiChevronRight from '~icons/mdi/chevron-right'
+import MdiFileImageBox from '~icons/mdi/file-image-box'
 
 export const iconMap = {
+  chevronLeft: MdiChevronLeft,
+  chevronRight: MdiChevronRight,
+  imagePlaceholder: MdiFileImageBox,
+
+  linkRemove: MdiLinkVariantRemove,
+  closeThick: MdiCloseThick,
+  role: MdiDramaMasks,
+  tableKey: MdiTableKey,
+  export: PhExportLight,
+  colInsertAfter: MdiTableColumnPlusAfter,
+  colInsertBefore: MdiTableColumnPlusBefore,
+  star: PhStar,
+  sortAsc: PhSortAscendingThin,
+  sortDesc: PhSortDescendingThin,
+  contentSaveExit: MdiContentSave,
+  contentSaveStay: MdiContentSaveEdit,
   exit: MdiExitToApp,
   snippet: PhBracketsAngleThin,
+  embed: PhBracketsAngleThin,
   list: PhListBulletsThin,
   cloud: PhCloudLightningThin,
   apiAndSupport: PhChatTextThin,
@@ -152,6 +192,7 @@ export const iconMap = {
   plus: PhPlusThin,
   search: PhSearchThin,
   copy: PhCopySimpleThin,
+  duplicate: PhCopySimpleThin,
   clipboard: PhClipboardThin,
   settings: PhGearThin,
   image: PhImageThin,
@@ -179,10 +220,11 @@ export const iconMap = {
   multiSelect: PhListBulletsThin,
   datetime: DatetimeIcon,
   geoData: GeoDataIcon,
-  rating: RatingIcon,
+  rating: PhStar,
   generic: GenericIcon,
   numeric: NumericIcon,
   email: EmailIcon,
+  sendEmail: MdiEmailArrowRightOutline,
   currency: CurrencyIcon,
   percent: PercentIcon,
   decimal: DecimalIcon,
@@ -190,9 +232,11 @@ export const iconMap = {
   duration: DurationIcon,
   phone: FilePhoneIcon,
   formula: PhFunctiontone,
+  function: PhFunctiontone,
   key: KeyIcon,
   json: PhBracketsCurlyThin,
   qrCode: PhQrCodeThin,
+  qrCodeScan: MdiQrcodeScan,
   barCode: PhBarcodeThin,
   calculator: PhCalculatorThin,
   rollup: PhLifebuoyThin,
@@ -223,6 +267,15 @@ export const iconMap = {
   mm: MMIcon,
   hm: HMIcon,
   bt: BTIcon,
+  passwordChange: MdiKeyChange,
+  mapMarker: MdiMapMarker,
+  currentLocation: MdiGpsFixed,
+  plusThick: MdiPlusThick,
+  dragVertical: MdiDragVertical,
+  databaseSync: MdiDatabaseSync,
+  fileUpload: MdiFileUploadOutline,
+  drag: MdiDrag,
+  comment: MdiCommentTextOutline,
 } as const
 
 export const getMdiIcon = (type: string): any => {