diff --git a/components/popconfirm/demo/custom-icon.ts b/components/popconfirm/demo/custom-icon.ts
index ffd8ffb7671..e806ce0b462 100644
--- a/components/popconfirm/demo/custom-icon.ts
+++ b/components/popconfirm/demo/custom-icon.ts
@@ -4,7 +4,10 @@ import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'nz-demo-popconfirm-custom-icon',
template: `
- Custom Icon
+ Custom Icon
+
+
+
`
})
export class NzDemoPopconfirmCustomIconComponent {
diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md
index e08acd5f696..2cc9d902b23 100644
--- a/components/popconfirm/doc/index.en-US.md
+++ b/components/popconfirm/doc/index.en-US.md
@@ -25,6 +25,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
| `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | boolean | false |
| `(nzOnCancel)` | callback of cancel | `EventEmitter` | - |
| `(nzOnConfirm)` | callback of confirmation | `EventEmitter` | - |
+| `[nzIcon]` | custom icon | `TemplateRef` | `` |
Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
diff --git a/components/popconfirm/doc/index.zh-CN.md b/components/popconfirm/doc/index.zh-CN.md
index 12417d86e2b..1b672c64b40 100644
--- a/components/popconfirm/doc/index.zh-CN.md
+++ b/components/popconfirm/doc/index.zh-CN.md
@@ -26,6 +26,7 @@ title: Popconfirm
| `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | boolean | false |
| `(nzOnCancel)` | 点击取消的回调 | `EventEmitter` | 无 |
| `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter` | 无 |
+| `[nzIcon]` | 自定义图标 | `TemplateRef` | `` |
更多属性请参考 [Tooltip](/components/tooltip/zh#api)。
diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html
index 06111f67631..d6fba21ddea 100644
--- a/components/popconfirm/nz-popconfirm.component.html
+++ b/components/popconfirm/nz-popconfirm.component.html
@@ -18,8 +18,10 @@
-
-
+
+
+
+
{{ nzTitle }}
diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
index a3322eb1b8a..09abcd99957 100644
--- a/components/popconfirm/nz-popconfirm.component.ts
+++ b/components/popconfirm/nz-popconfirm.component.ts
@@ -3,7 +3,8 @@ import {
Component,
EventEmitter,
Input,
- Output
+ Output,
+ TemplateRef
} from '@angular/core';
import { fadeAnimation } from '../core/animation/fade-animations';
import { toBoolean } from '../core/util/convert';
@@ -31,8 +32,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
@Input() nzOkText: string;
@Input() nzOkType: string = 'primary';
@Input() nzCancelText: string;
- @Input() nzIcon: string;
- @Input() nzIconColor: string;
+ @Input() nzIcon: TemplateRef;
@Input()
set nzCondition(value: boolean) {
diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
index acb080f3c9b..888e9411055 100644
--- a/components/popconfirm/nz-popconfirm.directive.ts
+++ b/components/popconfirm/nz-popconfirm.directive.ts
@@ -10,6 +10,7 @@ import {
Optional,
Output,
Renderer2,
+ TemplateRef,
ViewContainerRef
} from '@angular/core';
@@ -31,7 +32,7 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
_okText: string;
_okType: string = 'primary';
_cancelText: string;
- _icon: string;
+ _icon: TemplateRef;
_iconColor: string;
@Output() nzOnCancel: EventEmitter = new EventEmitter();
@@ -78,25 +79,14 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
}
@Input()
- set nzIcon(value: string) {
+ set nzIcon(value: TemplateRef) {
this._icon = value;
- this.updateCompValue('nzIcon', value);
}
- get nzIcon(): string {
+ get nzIcon(): TemplateRef {
return this._icon;
}
- @Input()
- set nzIconColor(value: string) {
- this._iconColor = value;
- this.updateCompValue('nzIcon', value);
- }
-
- get nzIconColor(): string {
- return this._iconColor;
- }
-
constructor(
elementRef: ElementRef,
hostView: ViewContainerRef,
@@ -127,8 +117,7 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
'nzOkType',
'nzCancelText',
'nzCondition',
- 'nzIcon',
- 'nzIconColor' ];
+ 'nzIcon' ];
properties.forEach(property => this.updateCompValue(property, this[ property ]));
this.tooltip.nzVisibleChange.pipe(takeUntil(this.subclassUnsubscribe$), distinctUntilChanged()).subscribe(data => {
this._visible = data;