diff --git a/web/src/views/app/IndexView.vue b/web/src/views/app/IndexView.vue
index 233f43f4..406a0515 100644
--- a/web/src/views/app/IndexView.vue
+++ b/web/src/views/app/IndexView.vue
@@ -220,7 +220,7 @@ onMounted(() => {
   <common-page show-footer>
     <template #action>
       <n-button type="primary" @click="handleUpdateCache">
-        <TheIcon :size="18" icon="material-symbols:refresh" />
+        <the-icon :size="18" icon="material-symbols:refresh" />
         {{ $gettext('Update Cache') }}
       </n-button>
     </template>
diff --git a/web/src/views/apps/benchmark/IndexView.vue b/web/src/views/apps/benchmark/IndexView.vue
index a8336b13..116ca2f9 100644
--- a/web/src/views/apps/benchmark/IndexView.vue
+++ b/web/src/views/apps/benchmark/IndexView.vue
@@ -160,7 +160,7 @@ const handleTest = async () => {
                     :stroke-width="3"
                     color="var(--primary-color)"
                   >
-                    <TheIcon :size="50" icon="bi:cpu" color="var(--primary-color)" />
+                    <the-icon :size="50" icon="bi:cpu" color="var(--primary-color)" />
                   </n-progress>
                   {{ $gettext('CPU') }}
                 </n-flex>
@@ -260,7 +260,7 @@ const handleTest = async () => {
                     :stroke-width="3"
                     color="var(--primary-color)"
                   >
-                    <TheIcon :size="50" icon="bi:memory" color="var(--primary-color)" />
+                    <the-icon :size="50" icon="bi:memory" color="var(--primary-color)" />
                   </n-progress>
                   {{ $gettext('Memory') }}
                 </n-flex>
@@ -291,7 +291,7 @@ const handleTest = async () => {
                     :stroke-width="3"
                     color="var(--primary-color)"
                   >
-                    <TheIcon :size="50" icon="bi:hdd-stack" color="var(--primary-color)" />
+                    <the-icon :size="50" icon="bi:hdd-stack" color="var(--primary-color)" />
                   </n-progress>
                   {{ $gettext('Disk') }}
                 </n-flex>
diff --git a/web/src/views/apps/codeserver/IndexView.vue b/web/src/views/apps/codeserver/IndexView.vue
index e6473310..4dd6903f 100644
--- a/web/src/views/apps/codeserver/IndexView.vue
+++ b/web/src/views/apps/codeserver/IndexView.vue
@@ -83,7 +83,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -102,20 +102,20 @@ onMounted(() => {
             </n-alert>
             <n-space>
               <n-button type="success" @click="handleStart">
-                <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                 {{ $gettext('Start') }}
               </n-button>
               <n-popconfirm @positive-click="handleStop">
                 <template #trigger>
                   <n-button type="error">
-                    <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                     {{ $gettext('Stop') }}
                   </n-button>
                 </template>
                 {{ $gettext('Are you sure you want to stop Code Server?') }}
               </n-popconfirm>
               <n-button type="warning" @click="handleRestart">
-                <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                <the-icon :size="18" icon="material-symbols:replay-rounded" />
                 {{ $gettext('Restart') }}
               </n-button>
             </n-space>
diff --git a/web/src/views/apps/docker/IndexView.vue b/web/src/views/apps/docker/IndexView.vue
index 30421289..123d55ee 100644
--- a/web/src/views/apps/docker/IndexView.vue
+++ b/web/src/views/apps/docker/IndexView.vue
@@ -86,7 +86,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -106,20 +106,20 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
                   {{ $gettext('Are you sure you want to stop Docker?') }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/fail2ban/IndexView.vue b/web/src/views/apps/fail2ban/IndexView.vue
index da4cc37f..c361cac8 100644
--- a/web/src/views/apps/fail2ban/IndexView.vue
+++ b/web/src/views/apps/fail2ban/IndexView.vue
@@ -289,7 +289,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveWhiteList"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save Whitelist') }}
       </n-button>
       <n-button
@@ -298,7 +298,7 @@ onMounted(() => {
         type="primary"
         @click="addJailModal = true"
       >
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Add Rule') }}
       </n-button>
     </template>
@@ -318,13 +318,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -335,11 +335,11 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
                 <n-button type="primary" @click="handleReload">
-                  <TheIcon :size="20" icon="material-symbols:refresh-rounded" />
+                  <the-icon :size="20" icon="material-symbols:refresh-rounded" />
                   {{ $gettext('Reload') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/frp/IndexView.vue b/web/src/views/apps/frp/IndexView.vue
index e0862125..3cbc5ad3 100644
--- a/web/src/views/apps/frp/IndexView.vue
+++ b/web/src/views/apps/frp/IndexView.vue
@@ -109,20 +109,20 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart('frps')">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop('frps')">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
                   {{ $gettext('Are you sure you want to stop Frps?') }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart('frps')">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
@@ -131,7 +131,7 @@ onMounted(() => {
           <n-card :title="$gettext('Modify Configuration')">
             <template #header-extra>
               <n-button type="primary" @click="handleSaveConfig('frps')">
-                <TheIcon :size="18" icon="material-symbols:save-outline-rounded" />
+                <the-icon :size="18" icon="material-symbols:save-outline-rounded" />
                 {{ $gettext('Save') }}
               </n-button>
             </template>
@@ -165,20 +165,20 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart('frpc')">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop('frpc')">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
                   {{ $gettext('Are you sure you want to stop Frpc?') }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart('frpc')">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
@@ -187,7 +187,7 @@ onMounted(() => {
           <n-card :title="$gettext('Modify Configuration')">
             <template #header-extra>
               <n-button type="primary" @click="handleSaveConfig('frpc')">
-                <TheIcon :size="18" icon="material-symbols:save-outline-rounded" />
+                <the-icon :size="18" icon="material-symbols:save-outline-rounded" />
                 {{ $gettext('Save') }}
               </n-button>
             </template>
diff --git a/web/src/views/apps/gitea/IndexView.vue b/web/src/views/apps/gitea/IndexView.vue
index cb15d274..d8702d44 100644
--- a/web/src/views/apps/gitea/IndexView.vue
+++ b/web/src/views/apps/gitea/IndexView.vue
@@ -83,7 +83,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -102,20 +102,20 @@ onMounted(() => {
             </n-alert>
             <n-space>
               <n-button type="success" @click="handleStart">
-                <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                 {{ $gettext('Start') }}
               </n-button>
               <n-popconfirm @positive-click="handleStop">
                 <template #trigger>
                   <n-button type="error">
-                    <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                     {{ $gettext('Stop') }}
                   </n-button>
                 </template>
                 {{ $gettext('Are you sure you want to stop Gitea?') }}
               </n-popconfirm>
               <n-button type="warning" @click="handleRestart">
-                <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                <the-icon :size="18" icon="material-symbols:replay-rounded" />
                 {{ $gettext('Restart') }}
               </n-button>
             </n-space>
diff --git a/web/src/views/apps/memcached/IndexView.vue b/web/src/views/apps/memcached/IndexView.vue
index a23c42b3..1bd876e6 100644
--- a/web/src/views/apps/memcached/IndexView.vue
+++ b/web/src/views/apps/memcached/IndexView.vue
@@ -106,7 +106,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -126,13 +126,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -143,7 +143,7 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/minio/IndexView.vue b/web/src/views/apps/minio/IndexView.vue
index 9a211a5b..fa65d220 100644
--- a/web/src/views/apps/minio/IndexView.vue
+++ b/web/src/views/apps/minio/IndexView.vue
@@ -78,7 +78,7 @@ onMounted(() => {
   <common-page show-footer>
     <template #action>
       <n-button v-if="currentTab == 'env'" class="ml-16" type="primary" @click="handleSaveEnv">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -97,20 +97,20 @@ onMounted(() => {
             </n-alert>
             <n-space>
               <n-button type="success" @click="handleStart">
-                <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                 {{ $gettext('Start') }}
               </n-button>
               <n-popconfirm @positive-click="handleStop">
                 <template #trigger>
                   <n-button type="error">
-                    <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                     {{ $gettext('Stop') }}
                   </n-button>
                 </template>
                 {{ $gettext('Are you sure you want to stop Minio?') }}
               </n-popconfirm>
               <n-button type="warning" @click="handleRestart">
-                <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                <the-icon :size="18" icon="material-symbols:replay-rounded" />
                 {{ $gettext('Restart') }}
               </n-button>
             </n-space>
diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index c6e23147..b00f36b8 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -126,7 +126,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -135,7 +135,7 @@ onMounted(() => {
         type="primary"
         @click="handleClearErrorLog"
       >
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Log') }}
       </n-button>
       <n-button
@@ -144,7 +144,7 @@ onMounted(() => {
         type="primary"
         @click="handleClearSlowLog"
       >
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Slow Log') }}
       </n-button>
     </template>
@@ -164,13 +164,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -181,7 +181,7 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 04440941..459f8674 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -119,7 +119,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -128,7 +128,7 @@ onMounted(() => {
         type="primary"
         @click="handleClearErrorLog"
       >
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Log') }}
       </n-button>
     </template>
@@ -147,13 +147,13 @@ onMounted(() => {
             </n-alert>
             <n-space>
               <n-button type="success" @click="handleStart">
-                <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                 {{ $gettext('Start') }}
               </n-button>
               <n-popconfirm @positive-click="handleStop">
                 <template #trigger>
                   <n-button type="error">
-                    <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                    <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                     {{ $gettext('Stop') }}
                   </n-button>
                 </template>
@@ -164,11 +164,11 @@ onMounted(() => {
                 }}
               </n-popconfirm>
               <n-button type="warning" @click="handleRestart">
-                <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                <the-icon :size="18" icon="material-symbols:replay-rounded" />
                 {{ $gettext('Restart') }}
               </n-button>
               <n-button type="primary" @click="handleReload">
-                <TheIcon :size="20" icon="material-symbols:refresh-rounded" />
+                <the-icon :size="20" icon="material-symbols:refresh-rounded" />
                 {{ $gettext('Reload') }}
               </n-button>
             </n-space>
diff --git a/web/src/views/apps/php/PhpView.vue b/web/src/views/apps/php/PhpView.vue
index 3a2087f3..3a0b7924 100644
--- a/web/src/views/apps/php/PhpView.vue
+++ b/web/src/views/apps/php/PhpView.vue
@@ -247,7 +247,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -256,7 +256,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveFPMConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -265,7 +265,7 @@ onMounted(() => {
         type="primary"
         @click="handleClearErrorLog"
       >
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Error Log') }}
       </n-button>
       <n-button
@@ -274,7 +274,7 @@ onMounted(() => {
         type="primary"
         @click="handleClearSlowLog"
       >
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Slow Log') }}
       </n-button>
     </template>
@@ -294,13 +294,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -312,11 +312,11 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
                 <n-button type="primary" @click="handleReload">
-                  <TheIcon :size="20" icon="material-symbols:refresh-rounded" />
+                  <the-icon :size="20" icon="material-symbols:refresh-rounded" />
                   {{ $gettext('Reload') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/phpmyadmin/IndexView.vue b/web/src/views/apps/phpmyadmin/IndexView.vue
index 4d6a462c..afed8892 100644
--- a/web/src/views/apps/phpmyadmin/IndexView.vue
+++ b/web/src/views/apps/phpmyadmin/IndexView.vue
@@ -54,7 +54,7 @@ onMounted(() => {
   <common-page show-footer>
     <template #action>
       <n-button v-if="currentTab == 'status'" class="ml-16" type="primary" @click="handleSave">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -63,7 +63,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
diff --git a/web/src/views/apps/podman/IndexView.vue b/web/src/views/apps/podman/IndexView.vue
index 7a92648a..ca2800ce 100644
--- a/web/src/views/apps/podman/IndexView.vue
+++ b/web/src/views/apps/podman/IndexView.vue
@@ -91,7 +91,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveRegistryConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -100,7 +100,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveStorageConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -127,20 +127,20 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
                   {{ $gettext('Are you sure you want to stop Podman?') }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index f31477f5..d9f83586 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -124,7 +124,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -133,11 +133,11 @@ onMounted(() => {
         type="primary"
         @click="handleSaveUserConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button v-if="currentTab == 'log'" class="ml-16" type="primary" @click="handleClearLog">
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Log') }}
       </n-button>
     </template>
@@ -157,13 +157,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -174,11 +174,11 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
                 <n-button type="primary" @click="handleReload">
-                  <TheIcon :size="20" icon="material-symbols:refresh-rounded" />
+                  <the-icon :size="20" icon="material-symbols:refresh-rounded" />
                   {{ $gettext('Reload') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/pureftpd/IndexView.vue b/web/src/views/apps/pureftpd/IndexView.vue
index f064c37e..640195dc 100644
--- a/web/src/views/apps/pureftpd/IndexView.vue
+++ b/web/src/views/apps/pureftpd/IndexView.vue
@@ -206,7 +206,7 @@ onMounted(() => {
   <common-page show-footer>
     <template #action>
       <n-button v-if="currentTab == 'status'" class="ml-16" type="primary" @click="handleSavePort">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -215,7 +215,7 @@ onMounted(() => {
         type="primary"
         @click="addUserModal = true"
       >
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Add User') }}
       </n-button>
     </template>
@@ -235,13 +235,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -252,7 +252,7 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/redis/IndexView.vue b/web/src/views/apps/redis/IndexView.vue
index 6b36e9e6..d9474a97 100644
--- a/web/src/views/apps/redis/IndexView.vue
+++ b/web/src/views/apps/redis/IndexView.vue
@@ -103,7 +103,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
     </template>
@@ -123,13 +123,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -140,7 +140,7 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/rsync/IndexView.vue b/web/src/views/apps/rsync/IndexView.vue
index e489a001..fc88f2c1 100644
--- a/web/src/views/apps/rsync/IndexView.vue
+++ b/web/src/views/apps/rsync/IndexView.vue
@@ -245,7 +245,7 @@ onMounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -254,7 +254,7 @@ onMounted(() => {
         type="primary"
         @click="addModuleModal = true"
       >
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Add Module') }}
       </n-button>
     </template>
@@ -274,13 +274,13 @@ onMounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -291,7 +291,7 @@ onMounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/s3fs/IndexView.vue b/web/src/views/apps/s3fs/IndexView.vue
index f53aa72f..7fda185d 100644
--- a/web/src/views/apps/s3fs/IndexView.vue
+++ b/web/src/views/apps/s3fs/IndexView.vue
@@ -101,7 +101,7 @@ onMounted(() => {
   <common-page show-footer>
     <template #action>
       <n-button class="ml-16" type="primary" @click="addMountModal = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Add Mount') }}
       </n-button>
     </template>
diff --git a/web/src/views/apps/supervisor/IndexView.vue b/web/src/views/apps/supervisor/IndexView.vue
index dc9c3e91..09daea52 100644
--- a/web/src/views/apps/supervisor/IndexView.vue
+++ b/web/src/views/apps/supervisor/IndexView.vue
@@ -363,7 +363,7 @@ onUnmounted(() => {
         type="primary"
         @click="handleSaveConfig"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -372,11 +372,11 @@ onUnmounted(() => {
         type="primary"
         @click="createProcessModal = true"
       >
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Add Process') }}
       </n-button>
       <n-button v-if="currentTab == 'log'" class="ml-16" type="primary" @click="handleClearLog">
-        <TheIcon :size="18" icon="material-symbols:delete-outline" />
+        <the-icon :size="18" icon="material-symbols:delete-outline" />
         {{ $gettext('Clear Log') }}
       </n-button>
     </template>
@@ -396,13 +396,13 @@ onUnmounted(() => {
               </n-alert>
               <n-space>
                 <n-button type="success" @click="handleStart">
-                  <TheIcon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
+                  <the-icon :size="24" icon="material-symbols:play-arrow-outline-rounded" />
                   {{ $gettext('Start') }}
                 </n-button>
                 <n-popconfirm @positive-click="handleStop">
                   <template #trigger>
                     <n-button type="error">
-                      <TheIcon :size="24" icon="material-symbols:stop-outline-rounded" />
+                      <the-icon :size="24" icon="material-symbols:stop-outline-rounded" />
                       {{ $gettext('Stop') }}
                     </n-button>
                   </template>
@@ -413,7 +413,7 @@ onUnmounted(() => {
                   }}
                 </n-popconfirm>
                 <n-button type="warning" @click="handleRestart">
-                  <TheIcon :size="18" icon="material-symbols:replay-rounded" />
+                  <the-icon :size="18" icon="material-symbols:replay-rounded" />
                   {{ $gettext('Restart') }}
                 </n-button>
               </n-space>
diff --git a/web/src/views/apps/toolbox/IndexView.vue b/web/src/views/apps/toolbox/IndexView.vue
index e3a76039..a737cb28 100644
--- a/web/src/views/apps/toolbox/IndexView.vue
+++ b/web/src/views/apps/toolbox/IndexView.vue
@@ -93,19 +93,19 @@ const handleSyncTime = () => {
   <common-page show-footer>
     <template #action>
       <n-button v-if="currentTab == 'dns'" class="ml-16" type="primary" @click="handleUpdateDNS">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button v-if="currentTab == 'swap'" class="ml-16" type="primary" @click="handleUpdateSwap">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button v-if="currentTab == 'host'" class="ml-16" type="primary" @click="handleUpdateHost">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button v-if="currentTab == 'time'" class="ml-16" type="primary" @click="handleUpdateTime">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button
@@ -114,7 +114,7 @@ const handleSyncTime = () => {
         type="primary"
         @click="handleUpdateRootPassword"
       >
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Modify') }}
       </n-button>
     </template>
diff --git a/web/src/views/cert/IndexView.vue b/web/src/views/cert/IndexView.vue
index 2c51128f..e5f4f40e 100644
--- a/web/src/views/cert/IndexView.vue
+++ b/web/src/views/cert/IndexView.vue
@@ -94,19 +94,19 @@ onUnmounted(() => {
     <template #action>
       <n-flex>
         <n-button v-if="currentTab == 'cert'" type="success" @click="uploadCert = true">
-          <TheIcon :size="18" icon="material-symbols:upload" />
+          <the-icon :size="18" icon="material-symbols:upload" />
           {{ $gettext('Upload Certificate') }}
         </n-button>
         <n-button v-if="currentTab == 'cert'" type="primary" @click="createCert = true">
-          <TheIcon :size="18" icon="material-symbols:add" />
+          <the-icon :size="18" icon="material-symbols:add" />
           {{ $gettext('Create Certificate') }}
         </n-button>
         <n-button v-if="currentTab == 'user'" type="primary" @click="createAccount = true">
-          <TheIcon :size="18" icon="material-symbols:add" />
+          <the-icon :size="18" icon="material-symbols:add" />
           {{ $gettext('Create Account') }}
         </n-button>
         <n-button v-if="currentTab == 'dns'" type="primary" @click="createDNS = true">
-          <TheIcon :size="18" icon="material-symbols:add" />
+          <the-icon :size="18" icon="material-symbols:add" />
           {{ $gettext('Create DNS') }}
         </n-button>
       </n-flex>
diff --git a/web/src/views/dashboard/IndexView.vue b/web/src/views/dashboard/IndexView.vue
index 3165ed48..600662e0 100644
--- a/web/src/views/dashboard/IndexView.vue
+++ b/web/src/views/dashboard/IndexView.vue
@@ -701,7 +701,7 @@ if (import.meta.hot) {
                           <n-thing>
                             <template #avatar>
                               <div class="mt-8">
-                                <TheIcon
+                                <the-icon
                                   :size="30"
                                   :icon="item.icon"
                                   color="var(--primary-color)"
diff --git a/web/src/views/dashboard/UpdateView.vue b/web/src/views/dashboard/UpdateView.vue
index 66be8b20..34e917dc 100644
--- a/web/src/views/dashboard/UpdateView.vue
+++ b/web/src/views/dashboard/UpdateView.vue
@@ -55,7 +55,7 @@ const handleUpdate = () => {
     <template #action>
       <div>
         <n-button v-if="versions" class="ml-16" type="primary" @click="handleUpdate">
-          <TheIcon :size="18" icon="material-symbols:arrow-circle-up-outline-rounded" />
+          <the-icon :size="18" icon="material-symbols:arrow-circle-up-outline-rounded" />
           {{ $gettext('Update Now') }}
         </n-button>
       </div>
diff --git a/web/src/views/database/IndexView.vue b/web/src/views/database/IndexView.vue
index 2776acea..2b3dbe51 100644
--- a/web/src/views/database/IndexView.vue
+++ b/web/src/views/database/IndexView.vue
@@ -28,15 +28,15 @@ const createServerModalShow = ref(false)
         type="primary"
         @click="createDatabaseModalShow = true"
       >
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create Database') }}
       </n-button>
       <n-button v-if="currentTab === 'user'" type="primary" @click="createUserModalShow = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create User') }}
       </n-button>
       <n-button v-if="currentTab === 'server'" type="primary" @click="createServerModalShow = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Add Server') }}
       </n-button>
     </template>
diff --git a/web/src/views/firewall/ForwardView.vue b/web/src/views/firewall/ForwardView.vue
index dda5962b..9fff13bd 100644
--- a/web/src/views/firewall/ForwardView.vue
+++ b/web/src/views/firewall/ForwardView.vue
@@ -162,13 +162,13 @@ onMounted(() => {
   <n-flex vertical :size="20">
     <n-flex items-center>
       <n-button type="primary" @click="createModalShow = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create Forwarding') }}
       </n-button>
       <n-popconfirm @positive-click="batchDelete">
         <template #trigger>
           <n-button type="warning">
-            <TheIcon :size="18" icon="material-symbols:delete-outline" />
+            <the-icon :size="18" icon="material-symbols:delete-outline" />
             {{ $gettext('Batch Delete') }}
           </n-button>
         </template>
diff --git a/web/src/views/firewall/IpRuleView.vue b/web/src/views/firewall/IpRuleView.vue
index 881b6637..3a51a96b 100644
--- a/web/src/views/firewall/IpRuleView.vue
+++ b/web/src/views/firewall/IpRuleView.vue
@@ -204,13 +204,13 @@ onMounted(() => {
   <n-flex vertical :size="20">
     <n-flex items-center>
       <n-button type="primary" @click="createModalShow = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create Rule') }}
       </n-button>
       <n-popconfirm @positive-click="batchDelete">
         <template #trigger>
           <n-button type="warning">
-            <TheIcon :size="18" icon="material-symbols:delete-outline" />
+            <the-icon :size="18" icon="material-symbols:delete-outline" />
             {{ $gettext('Batch Delete') }}
           </n-button>
         </template>
diff --git a/web/src/views/firewall/RuleView.vue b/web/src/views/firewall/RuleView.vue
index d28c7487..163dbc4c 100644
--- a/web/src/views/firewall/RuleView.vue
+++ b/web/src/views/firewall/RuleView.vue
@@ -241,13 +241,13 @@ onMounted(() => {
   <n-flex vertical :size="20">
     <n-flex items-center>
       <n-button type="primary" @click="createModalShow = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create Rule') }}
       </n-button>
       <n-popconfirm @positive-click="batchDelete">
         <template #trigger>
           <n-button type="warning">
-            <TheIcon :size="18" icon="material-symbols:delete-outline" />
+            <the-icon :size="18" icon="material-symbols:delete-outline" />
             {{ $gettext('Batch Delete') }}
           </n-button>
         </template>
diff --git a/web/src/views/monitor/IndexView.vue b/web/src/views/monitor/IndexView.vue
index 82496b85..3e28ad56 100644
--- a/web/src/views/monitor/IndexView.vue
+++ b/web/src/views/monitor/IndexView.vue
@@ -447,7 +447,7 @@ watch(data, () => {
       <n-popconfirm @positive-click="handleClear">
         <template #trigger>
           <n-button type="error">
-            <TheIcon :size="18" icon="material-symbols:delete-outline" />
+            <the-icon :size="18" icon="material-symbols:delete-outline" />
             {{ $gettext('Clear Monitoring Records') }}
           </n-button>
         </template>
diff --git a/web/src/views/setting/IndexView.vue b/web/src/views/setting/IndexView.vue
index 83e32b1a..27ff7206 100644
--- a/web/src/views/setting/IndexView.vue
+++ b/web/src/views/setting/IndexView.vue
@@ -61,11 +61,11 @@ const handleCreate = () => {
   <common-page show-footer>
     <template #action>
       <n-button v-if="currentTab != 'user'" type="primary" @click="handleSave">
-        <TheIcon :size="18" icon="material-symbols:save-outline" />
+        <the-icon :size="18" icon="material-symbols:save-outline" />
         {{ $gettext('Save') }}
       </n-button>
       <n-button v-if="currentTab == 'user'" type="primary" @click="handleCreate">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create User') }}
       </n-button>
     </template>
diff --git a/web/src/views/ssh/IndexView.vue b/web/src/views/ssh/IndexView.vue
index af145a5b..24232c7a 100644
--- a/web/src/views/ssh/IndexView.vue
+++ b/web/src/views/ssh/IndexView.vue
@@ -227,7 +227,7 @@ onUnmounted(() => {
   <common-page show-footer>
     <template #action>
       <n-button type="primary" @click="create = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create Host') }}
       </n-button>
     </template>
diff --git a/web/src/views/task/IndexView.vue b/web/src/views/task/IndexView.vue
index 15b8413f..fd380256 100644
--- a/web/src/views/task/IndexView.vue
+++ b/web/src/views/task/IndexView.vue
@@ -21,7 +21,7 @@ const create = ref(false)
   <common-page show-footer>
     <template #action>
       <n-button v-if="current == 'cron'" type="primary" @click="create = true">
-        <TheIcon :size="18" icon="material-symbols:add" />
+        <the-icon :size="18" icon="material-symbols:add" />
         {{ $gettext('Create Task') }}
       </n-button>
     </template>
diff --git a/web/src/views/website/EditView.vue b/web/src/views/website/EditView.vue
index b1e5cb3e..54ad1de5 100644
--- a/web/src/views/website/EditView.vue
+++ b/web/src/views/website/EditView.vue
@@ -184,7 +184,7 @@ const onCreateListen = () => {
         <n-popconfirm v-if="current === 'config'" @positive-click="handleReset">
           <template #trigger>
             <n-button type="success">
-              <TheIcon :size="18" icon="material-symbols:refresh" />
+              <the-icon :size="18" icon="material-symbols:refresh" />
               {{ $gettext('Reset Configuration') }}
             </n-button>
           </template>
@@ -196,7 +196,7 @@ const onCreateListen = () => {
           type="success"
           @click="proxyBuilderModal = true"
         >
-          <TheIcon :size="18" icon="material-symbols:build-outline-rounded" />
+          <the-icon :size="18" icon="material-symbols:build-outline-rounded" />
           {{ $gettext('Generate Reverse Proxy Configuration') }}
         </n-button>
         <n-button
@@ -207,17 +207,17 @@ const onCreateListen = () => {
           type="success"
           @click="handleObtainCert"
         >
-          <TheIcon :size="18" icon="material-symbols:done-rounded" />
+          <the-icon :size="18" icon="material-symbols:done-rounded" />
           {{ $gettext('One-click Certificate Issuance') }}
         </n-button>
         <n-button v-if="current !== 'log'" class="ml-16" type="primary" @click="handleSave">
-          <TheIcon :size="18" icon="material-symbols:save-outline" />
+          <the-icon :size="18" icon="material-symbols:save-outline" />
           {{ $gettext('Save') }}
         </n-button>
         <n-popconfirm v-if="current === 'log'" @positive-click="clearLog">
           <template #trigger>
             <n-button type="primary">
-              <TheIcon :size="18" icon="material-symbols:delete-outline" />
+              <the-icon :size="18" icon="material-symbols:delete-outline" />
               {{ $gettext('Clear Logs') }}
             </n-button>
           </template>
diff --git a/web/src/views/website/IndexView.vue b/web/src/views/website/IndexView.vue
index 9d78bb6c..b6ca3084 100644
--- a/web/src/views/website/IndexView.vue
+++ b/web/src/views/website/IndexView.vue
@@ -292,7 +292,7 @@ const handleCreate = async () => {
   useRequest(website.create(createModel.value)).onSuccess(() => {
     refresh()
     window.$message.success(
-      $gettext('Website %{ name } created successfully', { name: createModal.value.name })
+      $gettext('Website %{ name } created successfully', { name: createModel.value.name })
     )
     createModal.value = false
     createModel.value = {
@@ -347,11 +347,15 @@ onMounted(() => {
     <template #action>
       <n-flex>
         <n-button type="warning" @click="editDefaultPageModal = true">
+          <the-icon :size="18" icon="material-symbols:edit-document-outline" />
           {{ $gettext('Modify Default Page') }}
         </n-button>
         <n-popconfirm @positive-click="bulkDelete">
           <template #trigger>
-            <n-button type="error"> {{ $gettext('Batch Delete') }} </n-button>
+            <n-button type="error">
+              <the-icon :size="18" icon="material-symbols:delete-outline" />
+              {{ $gettext('Batch Delete') }}
+            </n-button>
           </template>
           {{
             $gettext(
@@ -360,9 +364,11 @@ onMounted(() => {
           }}
         </n-popconfirm>
         <n-button type="primary" @click="bulkCreateModal = true">
+          <the-icon :size="18" icon="material-symbols:add" />
           {{ $gettext('Bulk Create Website') }}
         </n-button>
         <n-button type="primary" @click="createModal = true">
+          <the-icon :size="18" icon="material-symbols:add" />
           {{ $gettext('Create Website') }}
         </n-button>
       </n-flex>