refactor: use <nz-icon> to instead of [nz-icon] (#8927)

NG-ZORRO · Dec 14, 2024 · 8e797c2 · 8e797c2
1 parent 8b24746
commit 8e797c2
Show file tree

Hide file tree

Showing 195 changed files with 427 additions and 435 deletions.
diff --git a/components/alert/alert.component.ts b/components/alert/alert.component.ts
@@ -56,7 +56,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
             @if (nzIcon) {
               <ng-container *nzStringTemplateOutlet="nzIcon"></ng-container>
             } @else {
-              <span nz-icon [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme"></span>
+              <nz-icon [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme" />
             }
           </div>
         }
@@ -89,7 +89,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
                 <span class="ant-alert-close-text">{{ nzCloseText }}</span>
               </ng-container>
             } @else {
-              <span nz-icon nzType="close"></span>
+              <nz-icon nzType="close" />
             }
           </button>
         }

diff --git a/components/auto-complete/demo/certain-category.ts b/components/auto-complete/demo/certain-category.ts
@@ -27,7 +27,7 @@ interface AutocompleteOptionGroups {
         />
       </nz-input-group>
       <ng-template #suffixIcon>
-        <span nz-icon nzType="search"></span>
+        <nz-icon nzType="search" />
       </ng-template>
       <nz-autocomplete #auto>
         @for (group of optionGroups; track group.title) {

diff --git a/components/auto-complete/demo/uncertain-category.ts b/components/auto-complete/demo/uncertain-category.ts
@@ -22,7 +22,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
     </nz-input-group>
     <ng-template #suffixIconButton>
       <button nz-button nzType="primary" nzSize="large" nzSearch>
-        <span nz-icon nzType="search" nzTheme="outline"></span>
+        <nz-icon nzType="search" nzTheme="outline" />
       </button>
     </ng-template>
     <nz-autocomplete #auto>

diff --git a/components/avatar/avatar.component.ts b/components/avatar/avatar.component.ts
@@ -31,7 +31,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
   imports: [NzIconModule, PlatformModule],
   template: `
     @if (nzIcon && hasIcon) {
-      <span nz-icon [nzType]="nzIcon"></span>
+      <nz-icon [nzType]="nzIcon" />
     } @else if (nzSrc && hasSrc) {
       <img [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError($event)" />
     } @else if (nzText && hasText) {

diff --git a/components/back-top/back-top.component.ts b/components/back-top/back-top.component.ts
@@ -49,7 +49,7 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
         <ng-template #defaultContent>
           <div class="ant-back-top-content">
             <div class="ant-back-top-icon">
-              <span nz-icon nzType="vertical-align-top"></span>
+              <nz-icon nzType="vertical-align-top" />
             </div>
           </div>
         </ng-template>

diff --git a/components/badge/demo/basic.ts b/components/badge/demo/basic.ts
@@ -17,7 +17,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
       <a class="head-example"></a>
     </nz-badge>
     <ng-template #iconTemplate>
-      <span nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></span>
+      <nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d" />
     </ng-template>
   `,
   styles: [

diff --git a/components/badge/demo/change.ts b/components/badge/demo/change.ts
@@ -15,8 +15,8 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
         <a class="head-example"></a>
       </nz-badge>
       <nz-button-group>
-        <button nz-button (click)="minusCount()"><span nz-icon nzType="minus"></span></button>
-        <button nz-button (click)="addCount()"><span nz-icon nzType="plus"></span></button>
+        <button nz-button (click)="minusCount()"><nz-icon nzType="minus" /></button>
+        <button nz-button (click)="addCount()"><nz-icon nzType="plus" /></button>
       </nz-button-group>
     </div>
     <br />

diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts
@@ -8,10 +8,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   imports: [NzBadgeModule, NzIconModule],
   template: `
     <nz-badge nzDot>
-      <span nz-icon nzType="notification"></span>
+      <nz-icon nzType="notification" />
     </nz-badge>
     <nz-badge nzDot [nzShowDot]="false">
-      <span nz-icon nzType="notification"></span>
+      <nz-icon nzType="notification" />
     </nz-badge>
     <nz-badge nzDot>
       <a>Link something</a>
@@ -23,7 +23,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
         margin-right: 20px;
       }
 
-      [nz-icon] {
+      nz-icon {
         width: 16px;
         height: 16px;
         line-height: 16px;

diff --git a/components/badge/demo/no-wrapper.ts b/components/badge/demo/no-wrapper.ts
@@ -20,7 +20,7 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
       <a class="head-example"></a>
     </nz-badge>
     <ng-template #iconTemplate>
-      <span nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></span>
+      <nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d" />
     </ng-template>
     <nz-badge nzStandalone [nzCount]="show ? 109 : 0" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
   `,

diff --git a/components/breadcrumb/breadcrumb-item.component.ts b/components/breadcrumb/breadcrumb-item.component.ts
@@ -24,7 +24,7 @@ import { NzBreadCrumbSeparatorComponent } from './breadcrumb-separator.component
     @if (!!nzOverlay) {
       <span class="ant-breadcrumb-overlay-link" nz-dropdown [nzDropdownMenu]="nzOverlay">
         <ng-template [ngTemplateOutlet]="noMenuTpl"></ng-template>
-        <span nz-icon nzType="down"></span>
+        <nz-icon nzType="down" />
       </span>
     } @else {
       <ng-template [ngTemplateOutlet]="noMenuTpl" />

diff --git a/components/breadcrumb/demo/separator.ts b/components/breadcrumb/demo/separator.ts
@@ -24,7 +24,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>An Application</nz-breadcrumb-item>
     </nz-breadcrumb>
-    <ng-template #iconTemplate><span nz-icon nzType="arrow-right"></span></ng-template>
+    <ng-template #iconTemplate><nz-icon nzType="arrow-right" /></ng-template>
   `,
   styles: [
     `

diff --git a/components/breadcrumb/demo/with-icon.ts b/components/breadcrumb/demo/with-icon.ts
@@ -9,11 +9,11 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   template: `
     <nz-breadcrumb>
       <nz-breadcrumb-item>
-        <span nz-icon nzType="home"></span>
+        <nz-icon nzType="home" />
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
         <a>
-          <span nz-icon nzType="user"></span>
+          <nz-icon nzType="user" />
           <span>Application List</span>
         </a>
       </nz-breadcrumb-item>

diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -48,7 +48,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
   encapsulation: ViewEncapsulation.None,
   template: `
     @if (nzLoading) {
-      <span nz-icon nzType="loading"></span>
+      <nz-icon nzType="loading" />
     }
     <ng-content></ng-content>
   `,
@@ -121,7 +121,7 @@ export class NzButtonComponent implements OnChanges, AfterViewInit, AfterContent
     // ignore icon and comment
     const noSpan =
       listOfNode.filter(node => {
-        return !(node.nodeName === '#comment' || !!(node as HTMLElement)?.attributes?.getNamedItem('nz-icon'));
+        return !(node.nodeName === '#comment' || !!(node as HTMLElement)?.classList?.contains('anticon'));
       }).length == 0;
     return !!this.nzIconDirectiveElement && noSpan && noText;
   }

diff --git a/components/button/button.spec.ts b/components/button/button.spec.ts
@@ -321,7 +321,7 @@ export class TestButtonComponent {
   imports: [NzIconModule, NzButtonModule],
   template: `
     <button nz-button nzType="primary" (click)="load()" [nzLoading]="loading">
-      <span nz-icon nzType="poweroff"></span>
+      <nz-icon nzType="poweroff" />
       {{ 'Click me!' }}
     </button>
   `
@@ -340,7 +340,7 @@ export class TestButtonBindingComponent {
   template: `
     <button nz-button>
       {{ title }}
-      <span nz-icon nzType="caret-down"></span>
+      <nz-icon nzType="caret-down" />
     </button>
   `
 })
@@ -355,7 +355,7 @@ export class TestButtonWithIconComponent implements OnInit {
   imports: [NzIconModule, NzButtonModule],
   template: `
     <button nz-button>
-      <span nz-icon nzType="caret-down"></span>
+      <nz-icon nzType="caret-down" />
     </button>
   `
 })
@@ -407,7 +407,7 @@ export class TestButtonIconOnlyWithoutIconComponent {}
   imports: [NzIconModule, NzButtonModule],
   template: `
     <button nz-button nzLoading>
-      <span nz-icon nzType="caret-down"></span>
+      <nz-icon nzType="caret-down" />
     </button>
   `
 })

diff --git a/components/button/demo/button-group.ts b/components/button/demo/button-group.ts
@@ -26,17 +26,17 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     <h4>With Icon</h4>
     <nz-button-group>
       <button nz-button nzType="primary">
-        <span nz-icon nzType="left"></span>
+        <nz-icon nzType="left" />
         Go back
       </button>
       <button nz-button nzType="primary">
         Go forward
-        <span nz-icon nzType="right"></span>
+        <nz-icon nzType="right" />
       </button>
     </nz-button-group>
     <nz-button-group>
-      <button nz-button nzType="primary"><span nz-icon nzType="cloud"></span></button>
-      <button nz-button nzType="primary"><span nz-icon nzType="cloud-download"></span></button>
+      <button nz-button nzType="primary"><nz-icon nzType="cloud" /></button>
+      <button nz-button nzType="primary"><nz-icon nzType="cloud-download" /></button>
     </nz-button-group>
   `,
   styles: [

diff --git a/components/button/demo/icon.ts b/components/button/demo/icon.ts
@@ -8,29 +8,29 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   imports: [NzButtonModule, NzIconModule],
   template: `
     <button nz-button nzType="primary" nzShape="circle">
-      <span nz-icon nzType="search"></span>
+      <nz-icon nzType="search" />
     </button>
     <button nz-button nzType="primary" nzShape="circle">A</button>
     <button nz-button nzType="primary">
-      <span nz-icon nzType="search"></span>
+      <nz-icon nzType="search" />
       Search
     </button>
     <button nz-button nzType="default" nzShape="circle">
-      <span nz-icon nzType="search"></span>
+      <nz-icon nzType="search" />
     </button>
     <button nz-button nzType="default">
-      <span nz-icon nzType="search"></span>
+      <nz-icon nzType="search" />
       Search
     </button>
     <br />
-    <button nz-button nzType="default" nzShape="circle"><span nz-icon nzType="search"></span></button>
+    <button nz-button nzType="default" nzShape="circle"><nz-icon nzType="search" /></button>
     <button nz-button nzType="default">
-      <span nz-icon nzType="search"></span>
+      <nz-icon nzType="search" />
       Search
     </button>
-    <button nz-button nzType="dashed" nzShape="circle"><span nz-icon nzType="search"></span></button>
+    <button nz-button nzType="dashed" nzShape="circle"><nz-icon nzType="search" /></button>
     <button nz-button nzType="dashed">
-      <span nz-icon nzType="search"></span>
+      <nz-icon nzType="search" />
       Search
     </button>
   `,

diff --git a/components/button/demo/loading.ts b/components/button/demo/loading.ts
@@ -8,14 +8,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
   imports: [NzButtonModule, NzIconModule],
   template: `
     <button nz-button nzType="primary" nzLoading>
-      <span nz-icon nzType="poweroff"></span>
+      <nz-icon nzType="poweroff" />
       Loading
     </button>
     <button nz-button nzType="primary" nzSize="small" nzLoading>Loading</button>
     <br />
     <button nz-button nzType="primary" (click)="loadOne()" [nzLoading]="isLoadingOne">Click me!</button>
     <button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo">
-      <span nz-icon nzType="poweroff"></span>
+      <nz-icon nzType="poweroff" />
       Click me!
     </button>
     <br />

diff --git a/components/button/demo/multiple.ts b/components/button/demo/multiple.ts
@@ -12,7 +12,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     <button nz-button nzType="default">secondary</button>
     <button nz-button nz-dropdown [nzDropdownMenu]="menu">
       Actions
-      <span nz-icon nzType="down"></span>
+      <nz-icon nzType="down" />
     </button>
     <nz-dropdown-menu #menu="nzDropdownMenu">
       <ul nz-menu>

diff --git a/components/button/demo/size.ts b/components/button/demo/size.ts
@@ -22,31 +22,31 @@ import { NzRadioModule } from 'ng-zorro-antd/radio';
     <a nz-button [nzSize]="size" nzType="link">Link</a>
     <br />
     <button nz-button nzType="primary" [nzSize]="size">
-      <span nz-icon nzType="download"></span>
+      <nz-icon nzType="download" />
     </button>
     <button nz-button nzType="primary" [nzSize]="size" nzShape="circle">
-      <span nz-icon nzType="download"></span>
+      <nz-icon nzType="download" />
     </button>
     <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
-      <span nz-icon nzType="download"></span>
+      <nz-icon nzType="download" />
     </button>
     <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
-      <span nz-icon nzType="download"></span>
+      <nz-icon nzType="download" />
       Download
     </button>
     <button nz-button nzType="primary" [nzSize]="size">
-      <span nz-icon nzType="download"></span>
+      <nz-icon nzType="download" />
       Download
     </button>
     <br />
     <nz-button-group [nzSize]="size">
       <button nz-button nzType="primary">
-        <span nz-icon nzType="left"></span>
+        <nz-icon nzType="left" />
         Backward
       </button>
       <button nz-button nzType="primary">
         Forward
-        <span nz-icon nzType="right"></span>
+        <nz-icon nzType="right" />
       </button>
     </nz-button-group>
   `,

diff --git a/components/card/demo/loading.ts b/components/card/demo/loading.ts
@@ -32,13 +32,13 @@ import { NzSwitchModule } from 'ng-zorro-antd/switch';
       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
     </ng-template>
     <ng-template #actionSetting>
-      <span nz-icon nzType="setting"></span>
+      <nz-icon nzType="setting" />
     </ng-template>
     <ng-template #actionEdit>
-      <span nz-icon nzType="edit"></span>
+      <nz-icon nzType="edit" />
     </ng-template>
     <ng-template #actionEllipsis>
-      <span nz-icon nzType="ellipsis"></span>
+      <nz-icon nzType="ellipsis" />
     </ng-template>
   `
 })

diff --git a/components/card/demo/meta.ts b/components/card/demo/meta.ts
@@ -22,13 +22,13 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
       <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
     </ng-template>
     <ng-template #actionSetting>
-      <span nz-icon nzType="setting"></span>
+      <nz-icon nzType="setting" />
     </ng-template>
     <ng-template #actionEdit>
-      <span nz-icon nzType="edit"></span>
+      <nz-icon nzType="edit" />
     </ng-template>
     <ng-template #actionEllipsis>
-      <span nz-icon nzType="ellipsis"></span>
+      <nz-icon nzType="ellipsis" />
     </ng-template>
   `
 })

diff --git a/components/cascader/cascader-option.component.ts b/components/cascader/cascader-option.component.ts
@@ -10,15 +10,15 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
   OnInit,
+  Output,
   TemplateRef,
   ViewEncapsulation,
-  numberAttribute,
+  booleanAttribute,
   inject,
-  Output,
-  EventEmitter,
-  booleanAttribute
+  numberAttribute
 } from '@angular/core';
 
 import { NzHighlightModule } from 'ng-zorro-antd/core/highlight';
@@ -60,10 +60,10 @@ import { NzCascaderOption } from './typings';
     @if (!node.isLeaf || node.children?.length || node.isLoading) {
       <div class="ant-cascader-menu-item-expand-icon">
         @if (node.isLoading) {
-          <span nz-icon nzType="loading"></span>
+          <nz-icon nzType="loading" />
         } @else {
           <ng-container *nzStringTemplateOutlet="expandIcon">
-            <span nz-icon [nzType]="$any(expandIcon)"></span>
+            <nz-icon [nzType]="$any(expandIcon)" />
           </ng-container>
         }
       </div>