diff --git a/components/alert/alert.component.ts b/components/alert/alert.component.ts
index b6c33d4dae..57e1e617e5 100644
--- a/components/alert/alert.component.ts
+++ b/components/alert/alert.component.ts
@@ -50,9 +50,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'alert';
[@slideAlertMotion]
(@slideAlertMotion.done)="onFadeAnimationDone()"
>
-
-
-
+
+
+
+
+
+
+
+
{{ nzMessage }}
@@ -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 | null = null;
@Output() readonly nzOnClose = new EventEmitter();
closed = false;
iconTheme: 'outline' | 'fill' = 'fill';
diff --git a/components/alert/alert.spec.ts b/components/alert/alert.spec.ts
index 3bba8ff1cb..7daeac23f5 100644
--- a/components/alert/alert.spec.ts
+++ b/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: `
+
+
+
+ S
+
+ `
+})
+export class NzTestAlertCustomIconComponent {}
diff --git a/components/alert/demo/custom-icon.md b/components/alert/demo/custom-icon.md
new file mode 100644
index 0000000000..8f75f4af82
--- /dev/null
+++ b/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.
diff --git a/components/alert/demo/custom-icon.ts b/components/alert/demo/custom-icon.ts
new file mode 100644
index 0000000000..54ef21f1b3
--- /dev/null
+++ b/components/alert/demo/custom-icon.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-alert-custom-icon',
+ template: `
+
+
+
+ S
+
+ `,
+ styles: [
+ `
+ nz-alert {
+ margin-bottom: 16px;
+ }
+ `
+ ]
+})
+export class NzDemoAlertCustomIconComponent {}
diff --git a/components/alert/doc/index.en-US.md b/components/alert/doc/index.en-US.md
index f1b8da9111..7e071b156d 100644
--- a/components/alert/doc/index.en-US.md
+++ b/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` | - |
| `(nzOnClose)` | Callback when Alert is closed | `EventEmitter` | - |
diff --git a/components/alert/doc/index.zh-CN.md b/components/alert/doc/index.zh-CN.md
index 10d36504ba..13bc981a38 100644
--- a/components/alert/doc/index.zh-CN.md
+++ b/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` | - |
| `(nzOnClose)` | 关闭时触发的回调函数 | `EventEmitter` | - |
diff --git a/components/alert/style/patch.less b/components/alert/style/patch.less
index 1bd7be6dc7..e8fd4f3191 100644
--- a/components/alert/style/patch.less
+++ b/components/alert/style/patch.less
@@ -1,3 +1,9 @@
nz-alert {
display: block;
}
+
+.@{alert-prefix-cls} {
+ &-icon {
+ line-height: 1;
+ }
+}