diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts
index 25c1b67..b2e2b43 100644
--- a/site/sidebar.config.ts
+++ b/site/sidebar.config.ts
@@ -47,7 +47,7 @@ export default [
         component: () => import('tdesign-web-components/button/README.md'),
       },
       {
-        title: 'Icon 图表',
+        title: 'Icon 图标',
         name: 'icon',
         path: '/components/icon',
         component: () => import('tdesign-web-components/icon/README.md'),
diff --git a/src/button/button-icon.tsx b/src/button/button-icon.tsx
new file mode 100644
index 0000000..2bb780a
--- /dev/null
+++ b/src/button/button-icon.tsx
@@ -0,0 +1,9 @@
+import { define } from 'omi';
+
+import { Icon } from '../icon';
+
+export default class ButtonIcon extends Icon {
+  static isLightDOM = true;
+}
+
+define('t-button-icon', ButtonIcon);
diff --git a/src/button/button.tsx b/src/button/button.tsx
index 640857b..bcf20c5 100644
--- a/src/button/button.tsx
+++ b/src/button/button.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable max-classes-per-file */
+import './button-icon';
+
 import { Component, tag } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
@@ -63,7 +66,7 @@ export default class Button extends Component<ButtonProps> {
     }
 
     let iconNode = icon;
-    if (loading) iconNode = <t-icon className="mr-[2px]" name={'loading'} />;
+    if (loading) iconNode = <t-button-icon className="mr-[2px]" name={'loading'} />;
 
     const Tag = this.tag as string;
     return (
diff --git a/src/icon/icon.tsx b/src/icon/icon.tsx
index 8cf5ea2..b8291f3 100644
--- a/src/icon/icon.tsx
+++ b/src/icon/icon.tsx
@@ -1,4 +1,4 @@
-import { Component, signal, tag } from 'omi';
+import { Component, signal } from 'omi';
 
 import classname, { getClassPrefix } from '../_util/classname';
 import { loadLink } from './utils';
@@ -57,9 +57,8 @@ i.t-size-l {
 }
 `;
 
-@tag('t-icon')
 export default class Icon extends Component<IconProps> {
-  static css?: string | CSSStyleSheet | (string | CSSStyleSheet)[] | undefined = [iconStyleString];
+  static isLightDOM = false;
 
   install(): void {
     const classPrefix = getClassPrefix();
@@ -82,6 +81,7 @@ export default class Icon extends Component<IconProps> {
     return (
       <>
         <style>{styles.value}</style>
+        <style>{iconStyleString}</style>
         <i
           class={classname(
             className,
diff --git a/src/icon/index.ts b/src/icon/index.ts
index 32af3b1..c11b043 100644
--- a/src/icon/index.ts
+++ b/src/icon/index.ts
@@ -1,5 +1,9 @@
+import { define } from 'omi';
+
 import _Icon from './icon';
 
 export const Icon = _Icon;
 
 export default Icon;
+
+define('t-icon', Icon);