diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 10325afd2..eef87970a 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -27,7 +27,7 @@ type CastDateValue = [number, number, number]
 type CastTimeValue = [number, number, number]
 type CastTimeRangeValue = { start: CastTimeValue, end: CastTimeValue }
 
-const iconsTypeList = ['icon', 'trailingIcon', 'deleteIcon', 'selectedIcon', 'incrementIcon', 'decrementIcon', 'checkedIcon', 'uncheckedIcon', 'separatorIcon', 'closeIcon', 'backIcon', 'prevIcon', 'nextIcon']
+const iconsTypeList = ['icon', 'loadingIcon', 'trailingIcon', 'deleteIcon', 'selectedIcon', 'incrementIcon', 'decrementIcon', 'checkedIcon', 'uncheckedIcon', 'separatorIcon', 'closeIcon', 'backIcon', 'prevIcon', 'nextIcon']
 const convertIcon = (key: string): null | string => {
   if (!iconsTypeList.includes(key)) {
     return null
@@ -35,6 +35,8 @@ const convertIcon = (key: string): null | string => {
 
   if (key === 'icon') {
     return `:icon="RocketIcon"`
+  } else if (key === 'loadingIcon') {
+    return `:loading-icon="RocketIcon"`
   } else if (key === 'trailingIcon') {
     return `:trailing-icon="RocketIcon"`
   } else if (key === 'deleteIcon') {
diff --git a/docs/content/docs/2.components/empty.md b/docs/content/docs/2.components/empty.md
index 6b4373947..e5cfebf18 100644
--- a/docs/content/docs/2.components/empty.md
+++ b/docs/content/docs/2.components/empty.md
@@ -96,10 +96,10 @@ ignore:
   - loading
   - loadingIcon
 cast:
-  loadingIcon: 'LoaderClockIcon'
+  loadingIcon: 'RocketIcon'
 props:
   loading: true
-  loadingIcon: 'LoaderClockIcon'
+  loadingIcon: 'RocketIcon'
   title: Loading projects
   description: Please wait while we fetch your projects.
 ---
diff --git a/docs/server/utils/transformMDC.ts b/docs/server/utils/transformMDC.ts
index bcc10055e..12a6bd73a 100644
--- a/docs/server/utils/transformMDC.ts
+++ b/docs/server/utils/transformMDC.ts
@@ -327,7 +327,7 @@ type CastDateValue = [number, number, number]
 type CastTimeValue = [number, number, number]
 type CastTimeRangeValue = { start: CastTimeValue, end: CastTimeValue }
 
-const iconsTypeList = ['icon', 'trailingIcon', 'deleteIcon', 'selectedIcon', 'incrementIcon', 'decrementIcon', 'checkedIcon', 'uncheckedIcon', 'separatorIcon', 'closeIcon', 'backIcon', 'prevIcon', 'nextIcon']
+const iconsTypeList = ['icon', 'loadingIcon', 'trailingIcon', 'deleteIcon', 'selectedIcon', 'incrementIcon', 'decrementIcon', 'checkedIcon', 'uncheckedIcon', 'separatorIcon', 'closeIcon', 'backIcon', 'prevIcon', 'nextIcon']
 const convertIcon = (key: string): null | string => {
   if (!iconsTypeList.includes(key)) {
     return null
@@ -335,6 +335,8 @@ const convertIcon = (key: string): null | string => {
 
   if (key === 'icon') {
     return `:icon="RocketIcon"`
+  } else if (key === 'loadingIcon') {
+    return `:loading-icon="RocketIcon"`
   } else if (key === 'trailingIcon') {
     return `:trailing-icon="RocketIcon"`
   } else if (key === 'deleteIcon') {