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>

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">

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">

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>

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>
   `,

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>

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: [

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 />

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>