feat(module:icon): change tag of nz-icon from <i> to <span> (#7586)

* feat(module:icon): change i tag to span * feat(module:icon): fix some styles after icon changed * feat(module:icon): do not update v9 * feat(module:icon): fix tests Co-authored-by: simplejason <simplejason.coder@gmail.com>
NG-ZORRO · Jul 31, 2022 · 7242111 · 7242111
1 parent feb9f84
commit 7242111
Show file tree

Hide file tree

Showing 209 changed files with 522 additions and 459 deletions.
diff --git a/components/alert/alert.component.ts b/components/alert/alert.component.ts
@@ -51,7 +51,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
       (@slideAlertMotion.done)="onFadeAnimationDone()"
     >
       <ng-container *ngIf="nzShowIcon">
-        <i nz-icon class="ant-alert-icon" [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme"></i>
+        <span nz-icon class="ant-alert-icon" [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme"></span>
       </ng-container>
       <div class="ant-alert-content" *ngIf="nzMessage || nzDescription">
         <span class="ant-alert-message" *ngIf="nzMessage">
@@ -72,7 +72,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
         (click)="closeAlert()"
       >
         <ng-template #closeDefaultTemplate>
-          <i nz-icon nzType="close"></i>
+          <span nz-icon nzType="close"></span>
         </ng-template>
         <ng-container *ngIf="nzCloseText; else closeDefaultTemplate">
           <ng-container *nzStringTemplateOutlet="nzCloseText">

diff --git a/components/auto-complete/demo/certain-category.ts b/components/auto-complete/demo/certain-category.ts
@@ -21,7 +21,7 @@ export interface AutocompleteOptionGroups {
         />
       </nz-input-group>
       <ng-template #suffixIcon>
-        <i nz-icon nzType="search"></i>
+        <span nz-icon nzType="search"></span>
       </ng-template>
       <nz-autocomplete #auto>
         <nz-auto-optgroup *ngFor="let group of optionGroups" [nzLabel]="groupTitle">

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

diff --git a/components/avatar/avatar.component.ts b/components/avatar/avatar.component.ts
@@ -33,7 +33,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
   selector: 'nz-avatar',
   exportAs: 'nzAvatar',
   template: `
-    <i nz-icon *ngIf="nzIcon && hasIcon" [nzType]="nzIcon"></i>
+    <span nz-icon *ngIf="nzIcon && hasIcon" [nzType]="nzIcon"></span>
     <img *ngIf="nzSrc && hasSrc" [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError($event)" />
     <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>
   `,

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

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

diff --git a/components/badge/demo/change.ts b/components/badge/demo/change.ts
@@ -8,8 +8,8 @@ import { Component } from '@angular/core';
         <a class="head-example"></a>
       </nz-badge>
       <nz-button-group>
-        <button nz-button (click)="minCount()"><i nz-icon nzType="minus"></i></button>
-        <button nz-button (click)="addCount()"><i nz-icon nzType="plus"></i></button>
+        <button nz-button (click)="minCount()"><span nz-icon nzType="minus"></span></button>
+        <button nz-button (click)="addCount()"><span nz-icon nzType="plus"></span></button>
       </nz-button-group>
     </div>
     <br />

diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts
@@ -3,8 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-badge-dot',
   template: `
-    <nz-badge nzDot><i nz-icon nzType="notification"></i></nz-badge>
-    <nz-badge nzDot [nzShowDot]="false"><i nz-icon nzType="notification"></i></nz-badge>
+    <nz-badge nzDot><span nz-icon nzType="notification"></span></nz-badge>
+    <nz-badge nzDot [nzShowDot]="false"><span nz-icon nzType="notification"></span></nz-badge>
     <nz-badge nzDot>
       <a>Link something</a>
     </nz-badge>

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

diff --git a/components/breadcrumb/breadcrumb-item.component.ts b/components/breadcrumb/breadcrumb-item.component.ts
@@ -19,7 +19,7 @@ import { NzBreadcrumb } from './breadcrumb';
     <ng-container *ngIf="!!nzOverlay; else noMenuTpl">
       <span class="ant-breadcrumb-overlay-link" nz-dropdown [nzDropdownMenu]="nzOverlay">
         <ng-template [ngTemplateOutlet]="noMenuTpl"></ng-template>
-        <i *ngIf="!!nzOverlay" nz-icon nzType="down"></i>
+        <span *ngIf="!!nzOverlay" nz-icon nzType="down"></span>
       </span>
     </ng-container>
 

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

diff --git a/components/breadcrumb/demo/with-icon.ts b/components/breadcrumb/demo/with-icon.ts
@@ -5,11 +5,11 @@ import { Component } from '@angular/core';
   template: `
     <nz-breadcrumb>
       <nz-breadcrumb-item>
-        <i nz-icon nzType="home"></i>
+        <span nz-icon nzType="home"></span>
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
         <a>
-          <i nz-icon nzType="user"></i>
+          <span nz-icon nzType="user"></span>
           <span>Application List</span>
         </a>
       </nz-breadcrumb-item>

diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -43,7 +43,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   template: `
-    <i nz-icon nzType="loading" *ngIf="nzLoading"></i>
+    <span nz-icon nzType="loading" *ngIf="nzLoading"></span>
     <ng-content></ng-content>
   `,
   host: {
@@ -103,9 +103,22 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A
 
   assertIconOnly(element: HTMLButtonElement, renderer: Renderer2): void {
     const listOfNode = Array.from(element.childNodes);
-    const iconCount = listOfNode.filter(node => node.nodeName === 'I').length;
+    const iconCount = listOfNode.filter(node => {
+      const iconChildNodes = Array.from(node.childNodes || []);
+      return node.nodeName === 'SPAN' && iconChildNodes.length > 0 && iconChildNodes.every(ic => ic.nodeName === 'svg');
+    }).length;
     const noText = listOfNode.every(node => node.nodeName !== '#text');
-    const noSpan = listOfNode.every(node => node.nodeName !== 'SPAN');
+    // ignore icon
+    const noSpan = listOfNode
+      .filter(node => {
+        const iconChildNodes = Array.from(node.childNodes || []);
+        return !(
+          node.nodeName === 'SPAN' &&
+          iconChildNodes.length > 0 &&
+          iconChildNodes.every(ic => ic.nodeName === 'svg')
+        );
+      })
+      .every(node => node.nodeName !== 'SPAN');
     const isIconOnly = noSpan && noText && iconCount >= 1;
     if (isIconOnly) {
       renderer.addClass(element, 'ant-btn-icon-only');

diff --git a/components/button/button.spec.ts b/components/button/button.spec.ts
@@ -246,7 +246,7 @@ export class TestButtonComponent {
 @Component({
   template: `
     <button nz-button nzType="primary" (click)="load()" [nzLoading]="loading">
-      <i nz-icon nzType="poweroff"></i>
+      <span nz-icon nzType="poweroff"></span>
       {{ 'Click me!' }}
     </button>
   `
@@ -263,7 +263,7 @@ export class TestButtonBindingComponent {
   template: `
     <button nz-button>
       {{ title }}
-      <i nz-icon nzType="caret-down"></i>
+      <span nz-icon nzType="caret-down"></span>
     </button>
   `
 })
@@ -277,7 +277,7 @@ export class TestButtonWithIconComponent implements OnInit {
 @Component({
   template: `
     <button nz-button>
-      <i nz-icon nzType="caret-down"></i>
+      <span nz-icon nzType="caret-down"></span>
     </button>
   `
 })
@@ -286,7 +286,7 @@ export class TestButtonIconOnlyComponent {}
 @Component({
   template: `
     <button nz-button nzLoading>
-      <i nz-icon nzType="caret-down"></i>
+      <span nz-icon nzType="caret-down"></span>
     </button>
   `
 })

diff --git a/components/button/demo/button-group.ts b/components/button/demo/button-group.ts
@@ -22,17 +22,17 @@ import { Component } from '@angular/core';
     <h4>With Icon</h4>
     <nz-button-group>
       <button nz-button nzType="primary">
-        <i nz-icon nzType="left"></i>
+        <span nz-icon nzType="left"></span>
         Go back
       </button>
       <button nz-button nzType="primary">
         Go forward
-        <i nz-icon nzType="right"></i>
+        <span nz-icon nzType="right"></span>
       </button>
     </nz-button-group>
     <nz-button-group>
-      <button nz-button nzType="primary"><i nz-icon nzType="cloud"></i></button>
-      <button nz-button nzType="primary"><i nz-icon nzType="cloud-download"></i></button>
+      <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>
     </nz-button-group>
   `,
   styles: [

diff --git a/components/button/demo/icon.ts b/components/button/demo/icon.ts
@@ -3,26 +3,26 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-button-icon',
   template: `
-    <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="primary" nzShape="circle"><span nz-icon nzType="search"></span></button>
     <button nz-button nzType="primary" nzShape="circle">A</button>
     <button nz-button nzType="primary">
-      <i nz-icon nzType="search"></i>
+      <span nz-icon nzType="search"></span>
       Search
     </button>
-    <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="default" nzShape="circle"><span nz-icon nzType="search"></span></button>
     <button nz-button nzType="default">
-      <i nz-icon nzType="search"></i>
+      <span nz-icon nzType="search"></span>
       Search
     </button>
     <br />
-    <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="default" nzShape="circle"><span nz-icon nzType="search"></span></button>
     <button nz-button nzType="default">
-      <i nz-icon nzType="search"></i>
+      <span nz-icon nzType="search"></span>
       Search
     </button>
-    <button nz-button nzType="dashed" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="dashed" nzShape="circle"><span nz-icon nzType="search"></span></button>
     <button nz-button nzType="dashed">
-      <i nz-icon nzType="search"></i>
+      <span nz-icon nzType="search"></span>
       Search
     </button>
   `,

diff --git a/components/button/demo/loading.ts b/components/button/demo/loading.ts
@@ -4,14 +4,14 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-button-loading',
   template: `
     <button nz-button nzType="primary" nzLoading>
-      <i nz-icon nzType="poweroff"></i>
+      <span nz-icon nzType="poweroff"></span>
       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">
-      <i nz-icon nzType="poweroff"></i>
+      <span nz-icon nzType="poweroff"></span>
       Click me!
     </button>
     <br />

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

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

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

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

diff --git a/components/cascader/cascader-li.component.ts b/components/cascader/cascader-li.component.ts
@@ -37,10 +37,10 @@ import { NzCascaderOption } from './typings';
       ></div>
     </ng-template>
     <div *ngIf="!option.isLeaf || option.children?.length || option.loading" class="ant-cascader-menu-item-expand-icon">
-      <i *ngIf="option.loading; else icon" nz-icon nzType="loading"></i>
+      <span *ngIf="option.loading; else icon" nz-icon nzType="loading"></span>
       <ng-template #icon>
         <ng-container *nzStringTemplateOutlet="expandIcon">
-          <i nz-icon [nzType]="$any(expandIcon)"></i>
+          <span nz-icon [nzType]="$any(expandIcon)"></span>
         </ng-container>
       </ng-template>
     </div>

diff --git a/components/cascader/cascader.component.ts b/components/cascader/cascader.component.ts
@@ -110,17 +110,17 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
           >
         </div>
         <span class="ant-select-arrow" [class.ant-select-arrow-loading]="isLoading" *ngIf="nzShowArrow">
-          <i
+          <span
             *ngIf="!isLoading"
             nz-icon
             [nzType]="$any(nzSuffixIcon)"
             [class.ant-cascader-picker-arrow-expand]="menuVisible"
-          ></i>
-          <i *ngIf="isLoading" nz-icon nzType="loading"></i>
+          ></span>
+          <span *ngIf="isLoading" nz-icon nzType="loading"></span>
           <nz-form-item-feedback-icon *ngIf="hasFeedback && !!status" [status]="status"></nz-form-item-feedback-icon>
         </span>
         <span class="ant-select-clear" *ngIf="clearIconVisible">
-          <i nz-icon nzType="close-circle" nzTheme="fill" (click)="clearSelection($event)"></i>
+          <span nz-icon nzType="close-circle" nzTheme="fill" (click)="clearSelection($event)"></span>
         </span>
       </ng-container>
       <ng-content></ng-content>

diff --git a/components/cascader/cascader.spec.ts b/components/cascader/cascader.spec.ts
@@ -403,7 +403,7 @@ describe('cascader', () => {
       expect(testComponent.values!.length).toBe(3);
       fixture.detectChanges();
       spyOn(testComponent, 'onClear');
-      cascader.nativeElement.querySelector('.ant-select-clear i').click();
+      cascader.nativeElement.querySelector('.ant-select-clear span[nz-icon]').click();
       fixture.detectChanges();
       expect(testComponent.values!.length).toBe(0);
       expect(testComponent.onClear).toHaveBeenCalled();