feat(module: alert): support custom icon (#7691)

Author: heydong1

components/alert/alert.component.ts

@@ -50,9 +50,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
       [@slideAlertMotion]
       (@slideAlertMotion.done)="onFadeAnimationDone()"
     >
-      <ng-container *ngIf="nzShowIcon">
-        <span nz-icon class="ant-alert-icon" [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme"></span>
-      </ng-container>
+      <div *ngIf="nzShowIcon" class="ant-alert-icon">
+        <ng-container *ngIf="nzIcon; else iconDefaultTemplate">
+          <ng-container *nzStringTemplateOutlet="nzIcon"></ng-container>
+        </ng-container>
+        <ng-template #iconDefaultTemplate>
+          <span nz-icon [nzType]="nzIconType || inferredIconType" [nzTheme]="iconTheme"></span>
+        </ng-template>
+      </div>
       <div class="ant-alert-content" *ngIf="nzMessage || nzDescription">
         <span class="ant-alert-message" *ngIf="nzMessage">
           <ng-container *nzStringTemplateOutlet="nzMessage">{{ nzMessage }}</ng-container>
@@ -103,6 +108,7 @@ export class NzAlertComponent implements OnChanges, OnDestroy, OnInit {
   @Input() @WithConfig() @InputBoolean() nzShowIcon: boolean = false;
   @Input() @InputBoolean() nzBanner = false;
   @Input() @InputBoolean() nzNoAnimation = false;
+  @Input() nzIcon: string | TemplateRef<void> | null = null;
   @Output() readonly nzOnClose = new EventEmitter<boolean>();
   closed = false;
   iconTheme: 'outline' | 'fill' = 'fill';

components/alert/alert.spec.ts

@@ -14,7 +14,12 @@ describe('alert', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [BidiModule, NzAlertModule, NoopAnimationsModule, NzIconTestModule],
-        declarations: [NzDemoTestBasicComponent, NzDemoTestBannerComponent, NzTestAlertRtlComponent]
+        declarations: [
+          NzDemoTestBasicComponent,
+          NzDemoTestBannerComponent,
+          NzTestAlertRtlComponent,
+          NzTestAlertCustomIconComponent
+        ]
       });
       TestBed.compileComponents();
     })
@@ -93,8 +98,10 @@ describe('alert', () => {
       testComponent.showIcon = true;
       testComponent.iconType = 'lock';
       fixture.detectChanges();
-      expect(alert.nativeElement.querySelector('.ant-alert-icon').classList).toContain('anticon');
-      expect(alert.nativeElement.querySelector('.ant-alert-icon').classList).toContain('anticon-lock');
+      expect(alert.nativeElement.querySelector('.ant-alert-icon').firstElementChild.classList).toContain('anticon');
+      expect(alert.nativeElement.querySelector('.ant-alert-icon').firstElementChild.classList).toContain(
+        'anticon-lock'
+      );
     });
     it('should type work', () => {
       const listOfType = ['success', 'info', 'warning', 'error'];
@@ -139,6 +146,15 @@ describe('alert', () => {
       expect(alert.nativeElement.firstElementChild!.classList).not.toContain('ant-alert-rtl');
     });
   });
+  describe('custom icon', () => {
+    it('should custom icon work', () => {
+      const fixture = TestBed.createComponent(NzTestAlertCustomIconComponent);
+      const alert = fixture.debugElement.query(By.directive(NzAlertComponent));
+      fixture.detectChanges();
+      expect(alert.nativeElement.querySelector('.ant-alert-icon')).toBeDefined();
+      expect(alert.nativeElement.querySelector('.ant-alert-icon').firstElementChild).not.toContain('anticon');
+    });
+  });
 });
 
 @Component({
@@ -190,3 +206,20 @@ export class NzTestAlertRtlComponent {
   @ViewChild(Dir) dir!: Dir;
   direction = 'rtl';
 }
+
+@Component({
+  template: `
+    <nz-alert
+      nzType="success"
+      nzMessage="Success Tips"
+      nzDescription="Detailed description and advices about successful copywriting."
+      [nzIcon]="customIconTemplate"
+      nzShowIcon
+    ></nz-alert>
+
+    <ng-template #customIconTemplate>
+      <div> S </div>
+    </ng-template>
+  `
+})
+export class NzTestAlertCustomIconComponent {}

components/alert/demo/custom-icon.md

@@ -0,0 +1,15 @@
+---
+order: 8
+title:
+  zh-CN: 自定义图标
+  en-US: Custom icon
+---
+
+## zh-CN
+
+让信息类型更加醒目, 满足定制化需求。
+
+
+## en-US
+
+Make information more clear and more friendly and meet customized needs.

components/alert/demo/custom-icon.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-alert-custom-icon',
+  template: `
+    <nz-alert
+      nzType="success"
+      nzMessage="Success Tips"
+      nzDescription="Detailed description and advices about successful copywriting."
+      [nzIcon]="customIconTemplate"
+      nzShowIcon
+    ></nz-alert>
+
+    <ng-template #customIconTemplate>
+      <div> S </div>
+    </ng-template>
+  `,
+  styles: [
+    `
+      nz-alert {
+        margin-bottom: 16px;
+      }
+    `
+  ]
+})
+export class NzDemoAlertCustomIconComponent {}

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

@@ -31,4 +31,5 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 | `[nzShowIcon]` | Whether to show icon, in `nzBanner` mode default is `true` | `boolean` | `false` | ✅ |
 | `[nzIconType]` | Icon type, effective when `nzShowIcon` is `true` | `string` | - |
 | `[nzType]` | Type of Alert styles, in `nzBanner` mode default is `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` |
+| `[nzIcon]` | Custom icon, effective when showIcon is true | `string \| TemplateRef<void>` | - |
 | `(nzOnClose)` | Callback when Alert is closed | `EventEmitter<void>` | - |

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

@@ -32,4 +32,5 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 | `[nzShowIcon]` | 是否显示辅助图标，`nzBanner` 模式下默认值为 `true` | `boolean` | `false` | ✅ |
 | `[nzIconType]` | 自定义图标类型，`nzShowIcon` 为 `true` 时有效 | `string` | - |
 | `[nzType]` | 指定警告提示的样式，`nzBanner` 模式下默认值为 `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` |
+| `[nzIcon]` | 自定义图标，showIcon 为 true 时有效 | `string \| TemplateRef<void>` | - |
 | `(nzOnClose)` | 关闭时触发的回调函数 | `EventEmitter<void>` | - |

components/alert/style/patch.less

@@ -1,3 +1,9 @@
 nz-alert {
   display: block;
 }
+
+.@{alert-prefix-cls} {
+  &-icon {
+    line-height: 1;
+  }
+}