refactor(module:icon): migrate usage from [nz-icon] to nz-icon

components/code-editor/demo/complex.ts

@@ -25,14 +25,13 @@ import { NzTypographyModule } from 'ng-zorro-antd/typography';
       [nzEditorOption]="{ language: 'javascript' }"
     ></nz-code-editor>
     <ng-template #toolkit>
-      <span
-        nz-icon
+      <nz-icon
         [class.active]="fullScreen"
         nz-tooltip
         nzTooltipTitle="Toggle Fullscreen"
         [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
         (click)="toggleFullScreen()"
-      ></span>
+      />
     </ng-template>
   `,
   styles: [

components/collapse/collapse-panel.component.ts

@@ -45,12 +45,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapsePanel';
       @if (nzShowArrow) {
         <div>
           <ng-container *nzStringTemplateOutlet="nzExpandedIcon; let expandedIcon">
-            <span
-              nz-icon
-              [nzType]="expandedIcon || 'right'"
-              class="ant-collapse-arrow"
-              [nzRotate]="nzActive ? 90 : 0"
-            ></span>
+            <nz-icon [nzType]="expandedIcon || 'right'" class="ant-collapse-arrow" [nzRotate]="nzActive ? 90 : 0" />
           </ng-container>
         </div>
       }

components/comment/demo/basic.ts

@@ -24,25 +24,23 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
         </p>
       </nz-comment-content>
       <nz-comment-action>
-        <span
+        <nz-icon
           nz-tooltip
           nzTooltipTitle="Like"
-          nz-icon
           nzType="like"
           [nzTheme]="likes > 0 ? 'twotone' : 'outline'"
           (click)="like()"
-        ></span>
+        />
         <span class="count like">{{ likes }}</span>
       </nz-comment-action>
       <nz-comment-action>
-        <span
+        <nz-icon
           nz-tooltip
           nzTooltipTitle="Dislike"
-          nz-icon
           nzType="dislike"
           [nzTheme]="dislikes > 0 ? 'twotone' : 'outline'"
           (click)="dislike()"
-        ></span>
+        />
         <span class="count dislike">{{ dislikes }}</span>
       </nz-comment-action>
       <nz-comment-action>Reply to</nz-comment-action>

components/form/demo/dynamic-form-item.ts

@@ -29,12 +29,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
               [attr.id]="control.id"
               [formControlName]="control.controlInstance"
             />
-            <span
-              nz-icon
-              nzType="minus-circle-o"
-              class="dynamic-delete-button"
-              (click)="removeField(control, $event)"
-            ></span>
+            <nz-icon nzType="minus-circle-o" class="dynamic-delete-button" (click)="removeField(control, $event)" />
           </nz-form-control>
         </nz-form-item>
       }

components/icon/demo/custom.md

@@ -11,4 +11,4 @@ title:
 
 ## en-US
 
-You can just put a `svg` element inside of a `nz-icon` to render custom content. We would take care of size and color things for you.
+You can just put a `svg` element inside a `nz-icon` to render custom content. We would take care of size and color for you.

components/icon/doc/index.en-US.md

@@ -21,7 +21,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 ### nz-icon, [nz-icon]
 
 | Property           | Description                                                 | Type                           | Default     | Global Config |
-| ------------------ | ----------------------------------------------------------- | ------------------------------ | ----------- | ------------- |
+|--------------------|-------------------------------------------------------------|--------------------------------|-------------|---------------|
 | `[nzType]`         | Type of the ant design icon                                 | `string`                       | -           |
 | `[nzTheme]`        | Type of the ant design icon                                 | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅             |
 | `[nzSpin]`         | Rotate icon with animation                                  | `boolean`                      | `false`     |
@@ -32,10 +32,10 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 ### NzIconService
 
 | Methods/Properties     | Description                                                                                      | Parameters               |
-| ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------ |
+|------------------------|--------------------------------------------------------------------------------------------------|--------------------------|
 | `addIcon()`            | To import icons statically                                                                       | `IconDefinition`         |
 | `addIconLiteral()`     | To statically import custom icons                                                                | `string`, `string (SVG)` |
-| `fetchFromIconfont()`  | To get icon assets from fonticon                                                                 | `NzIconfontOption`       |
+| `fetchFromIconfont()`  | To get icon assets from iconfont                                                                 | `NzIconfontOption`       |
 | `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string`                 |
 
 ### SVG icons
@@ -49,16 +49,18 @@ We synced to Ant Design and replaced font icons with svg icons which bring benef
 
 You can join in [this discussion of Ant Design](https://github.com/ant-design/ant-design/issues/10353).
 
-NG-ZORRO hadn't provided an icon component. Instead, icon based on font files was provided. We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline`icons. But the best practice is always to use `nz-icon` directive and specify the `theme` prop.
+NG-ZORRO hadn't provided an icon component at the beginning. Instead, icon based on font files was provided.
+We make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline`icons.
+But the best practice is always to use `nz-icon` component and specify the `theme` prop.
 
 ```html
-<span nz-icon [nzType]="'star'" [nzTheme]="'fill'"></span>
+<nz-icon nzType="star" nzTheme="fill" />
 ```
 
 All the icons will be rendered to `<svg>`, and styles and classes applied to `<i>` would work.
 
 ```html
-<span nz-icon [nzType]="'message'" style="font-size: 16px; color: #08c;"></span>
+<nz-icon nzType="message" style="font-size: 16px; color: #08c;" />
 ```
 
 ### Static loading and dynamic loading
@@ -102,11 +104,15 @@ export const appConfig = {
 }
 ```
 
-Actually this calls `addIcon` of `NzIconService`. Icons imported would be bundled into your `.js` files. Static loading would increase your bundle's size so we recommend use dynamic importing as much as you can.
+Actually this calls `addIcon` of `NzIconService`. Icons imported would be bundled into your `.js` files. Static loading
+would increase your bundle's size so we recommend use dynamic importing as much as you can.
 
-> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the official website are loaded dynamically.
+> Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the
+> official website are loaded dynamically.
 
-Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your `angular.json` like this:
+Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO detects that the icon you want to
+render hasn't been registered, it would fire a HTTP request to load it. All you have to do is to config your
+`angular.json` like this:
 
 ```json
 {
@@ -120,9 +126,11 @@ Dynamic importing. This way would not increase your bundle's size. When NG-ZORRO
 }
 ```
 
-You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`.
+You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can
+deploy these icon assets to cdn. The parameter you passed would be add in front of `assets/`.
 
-Let's assume that you deploy static assets under `https://mycdn.somecdn.com/icons/assets`. You can call `changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there.
+Let's assume that you deploy static assets under `https://mycdn.somecdn.com/icons/assets`. You can call
+`changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there.
 
 Please call this in component's constructor or `AppInitService`.
 
@@ -134,7 +142,7 @@ Sometimes, you want to import icons in lazy modules to avoid increasing the size
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @NgModule({
-  imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
+  imports: [NzIconModule.forChild([QuestionOutline])]
 })
 class ChildModule {}
 ```
@@ -178,15 +186,15 @@ this._iconService.fetchFromIconfont({
 ```
 
 ```html
-<span nz-icon [nzIconfont]="'icon-tuichu'"></span>
+<nz-icon nzIconfont="icon-tuichu" />
 ```
 
 It creates a component that uses SVG sprites in essence.
 
 The following option are available:
 
 | Property    | Description                               | Type     | Default |
-| ----------- | ----------------------------------------- | -------- | ------- |
+|-------------|-------------------------------------------|----------|---------|
 | `scriptUrl` | The URL generated by iconfont.cn project. | `string` | -       |
 
 The property scriptUrl should be set to import the svg sprite symbols.

components/icon/doc/index.zh-CN.md

@@ -21,22 +21,22 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 
 ### nz-icon, [nz-icon]
 
-| 参数               | 说明                                                           | 类型                           | 默认值      | 支持全局配置 |
-| ------------------ | -------------------------------------------------------------- | ------------------------------ | ----------- | ------------ |
-| `[nzType]`         | 图标类型，遵循图标的命名规范                                   | string                         | -           |
-| `[nzTheme]`        | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标   | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅            |
-| `[nzSpin]`         | 是否有旋转动画                                                 | `boolean`                      | `false`     |
-| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)`        | -           | ✅            |
-| `[nzIconfont]`     | 指定来自 IconFont 的图标类型                                   | string                         | -           |
-| `[nzRotate]`       | 图标旋转角度（7.0.0 开始支持）                                 | `number`                       | -           |
+| 参数                 | 说明                                    | 类型                           | 默认值         | 支持全局配置 |
+|--------------------|---------------------------------------|------------------------------|-------------|--------|
+| `[nzType]`         | 图标类型，遵循图标的命名规范                        | string                       | -           |
+| `[nzTheme]`        | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标        | `'fill'丨'outline'丨'twotone'` | `'outline'` | ✅      |
+| `[nzSpin]`         | 是否有旋转动画                               | `boolean`                    | `false`     |
+| `[nzTwotoneColor]` | 仅适用双色图标，设置双色图标的主要颜色，默认为 Ant Design 蓝色 | `string (十六进制颜色)`            | -           | ✅      |
+| `[nzIconfont]`     | 指定来自 IconFont 的图标类型                   | string                       | -           |
+| `[nzRotate]`       | 图标旋转角度（7.0.0 开始支持）                    | `number`                     | -           |
 
 ### NzIconService
 
-| 方法/属性              | 说明                                                                                 | 参数                     |
-| ---------------------- | ------------------------------------------------------------------------------------ | ------------------------ |
-| `addIcon()`            | 用于静态引入图标，可传入多个值（或者用数组解构赋值）                                 | `IconDefinition`         |
-| `addIconLiteral()`     | 用于静态引入用户自定义图标                                                           | `string`, `string (SVG)` |
-| `fetchFromIconfont()`  | 用于从 FontIcon 获取图标资源文件                                                     | `NzIconfontOption`       |
+| 方法/属性                  | 说明                                              | 参数                       |
+|------------------------|-------------------------------------------------|--------------------------|
+| `addIcon()`            | 用于静态引入图标，可传入多个值（或者用数组解构赋值）                      | `IconDefinition`         |
+| `addIconLiteral()`     | 用于静态引入用户自定义图标                                   | `string`, `string (SVG)` |
+| `fetchFromIconfont()`  | 用于从 IconFont 获取图标资源文件                           | `NzIconfontOption`       |
 | `changeAssetsSource()` | 用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdn | `string`                 |
 
 ### SVG 图标
@@ -50,16 +50,16 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
 
 可参与 Ant Design 的相关讨论：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
 
-NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的指令 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如：
+NG-ZORRO 之前并没有图标组件，而是提供了基于字体文件的解决方案。新版本中我们提供了旧 API 兼容，如果你不修改既有的代码，所有的图标都会被动态加载成 `outline` 主题的图标，而最佳实践是使用新的组件 `nz-icon` 并传入 `theme` 以明确图标的主题风格，例如：
 
 ```html
-<span nz-icon [nzType]="'star'" [nzTheme]="'fill'"></span>
+<nz-icon nzType="star" nzTheme="fill" />
 ```
 
 所有的图标都会以 `<svg>` 标签渲染，但是你还是可以用之前对 i 标签设置的样式和类来控制 svg 的样式，例如：
 
 ```html
-<span nz-icon [nzType]="'message'" style="font-size: 16px; color: #08c;"></span>
+<nz-icon nzType="message" style="font-size: 16px; color: #08c;" />
 ```
 
 ### 静态加载与动态加载
@@ -133,7 +133,7 @@ export const appConfig = {
 
 ```typescript
 @NgModule({
-  imports: [CommonModule, NzIconModule.forChild([QuestionOutline])]
+  imports: [NzIconModule.forChild([QuestionOutline])]
 })
 class ChildModule {}
 ```
@@ -177,16 +177,16 @@ this._iconService.fetchFromIconfont({
 ```
 
 ```html
-<span nz-icon [nzIconfont]="'icon-tuichu'"></span>
+<nz-icon nzIconfont="icon-tuichu" />
 ```
 
 其本质上是创建了一个使用 `<use>` 标签渲染图标的组件。
 
 `options` 的配置项如下：
 
-| 参数        | 说明                                                                                           | 类型   | 默认值 |
-| ----------- | ---------------------------------------------------------------------------------------------- | ------ | ------ |
-| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | -      |
+| 参数          | 说明                                                                         | 类型     | 默认值 |
+|-------------|----------------------------------------------------------------------------|--------|-----|
+| `scriptUrl` | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，在 `namespace` 也设置的情况下有效 | string | -   |
 
 在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
 

components/image/image-preview.component.ts

@@ -87,13 +87,12 @@ const NZ_DEFAULT_ROTATE = 0;
             [class.ant-image-preview-operations-operation-disabled]="zoomOutDisabled && option.type === 'zoomOut'"
             (click)="option.onClick()"
           >
-            <span
+            <nz-icon
               class="ant-image-preview-operations-icon"
-              nz-icon
               [nzType]="option.icon"
               [nzRotate]="option.rotate ?? 0"
               nzTheme="outline"
-            ></span>
+            />
           </li>
         }
       </ul>

components/input/demo/allow-clear.ts

@@ -13,13 +13,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
     </nz-input-group>
     <ng-template #inputClearTpl>
       @if (inputValue) {
-        <span
-          nz-icon
-          class="ant-input-clear-icon"
-          nzTheme="fill"
-          nzType="close-circle"
-          (click)="inputValue = null"
-        ></span>
+        <nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null" />
       }
     </ng-template>
     <br />
@@ -29,13 +23,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
     </nz-input-group>
     <ng-template #textAreaClearTpl>
       @if (textValue) {
-        <span
-          nz-icon
-          class="ant-input-clear-icon"
-          nzTheme="fill"
-          nzType="close-circle"
-          (click)="textValue = null"
-        ></span>
+        <nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="textValue = null" />
       }
     </ng-template>
   `

components/input/demo/password-input.ts

@@ -17,12 +17,11 @@ import { NzInputModule } from 'ng-zorro-antd/input';
       />
     </nz-input-group>
     <ng-template #suffixTemplate>
-      <span
-        nz-icon
+      <nz-icon
         class="ant-input-password-icon"
         [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
         (click)="passwordVisible = !passwordVisible"
-      ></span>
+      />
     </ng-template>
   `
 })

components/layout/demo/custom-trigger.ts

@@ -34,12 +34,11 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
       </nz-sider>
       <nz-layout>
         <nz-header>
-          <span
+          <nz-icon
             class="trigger"
-            nz-icon
             [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
             (click)="isCollapsed = !isCollapsed"
-          ></span>
+          />
         </nz-header>
         <nz-content>
           <nz-breadcrumb>