feat(module:drawer): support [nzCloseIcon]

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

@@ -24,6 +24,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | Props | Description | Type | Default | Global Config |
 | --- | --- | --- | --- | --- |
 | `[nzClosable]` | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+|  `[nzCloseIcon]` | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
 | `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ |
 | `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ |
 | `[nzCloseOnNavigation]` | Whether to close the drawer when the navigation history changes | `boolean` | `true` | ✅ |
@@ -54,6 +55,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzContent |  The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type<T>` | - |
 | nzContentParams | The component inputs the param / The Template context. | `D` | - |
 | nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
+| nzCloseIcon | Custom close icon | `string \| TemplateRef<void> \| null` | `'close'` |
 | nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise<any>` | - |
 | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` |
 | nzCloseOnNavigation    | Whether to close the drawer when the navigation history changes | `boolean` | `true` |
@@ -84,6 +86,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | --- | --- | --- |
 | afterOpen | Callback called after open. | `Observable<void>` |
 | afterClose | Callback called after close. | `Observable<R>` |
+| nzCloseIcon | Custom close icon | `string \| TemplateRef<void> \| null` |
 | nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` |
 | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` |
 | nzMask | Whether to show mask or not. | `boolean` |

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

@@ -23,6 +23,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
 | `[nzClosable]` | 是否显示右上角的关闭按钮 | `boolean` | `true` |
+| `[nzCloseIcon]` | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
 | `[nzMaskClosable]` | 点击蒙层是否允许关闭 | `boolean` | `true` | ✅ |
 | `[nzMask]` | 是否展示遮罩 | `boolean` | `true` | ✅ |
 | `[nzCloseOnNavigation]`    | 导航历史变化时是否关闭抽屉组件 | `boolean` | `true` | ✅ |
@@ -54,6 +55,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | nzContentParams | 内容组件的输入参数 / Template的 context | `D` | - |
 | nzOnCancel | 点击遮罩层或右上角叉时执行,该函数可返回 promise 待执行完毕或 promise 结束时，将自动关闭对话框（返回false可阻止关闭） | `() => Promise<any>` | - |
 | nzClosable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
+| nzCloseIcon | 自定义关闭图标 | `string \| TemplateRef<void> \| null` | `'close'` |
 | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` |
 | nzMask | 是否展示遮罩 | `boolean` | `true` |
 | nzCloseOnNavigation    | 导航历史变化时是否关闭抽屉组件 | `boolean` | `true` |
@@ -86,6 +88,7 @@ import { NzDrawerModule } from 'ng-zorro-antd/drawer';
 | afterOpen | 打开之后的回调 | `Observable<void>` |
 | afterClose | 关闭之后的回调 | `Observable<R>` |
 | nzClosable | 是否显示右上角的关闭按钮 | `boolean` |
+| nzCloseIcon | 自定义关闭图标 | `string \| TemplateRef<void> \| null` |
 | nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` |
 | nzMask | 是否展示遮罩 | `boolean` |
 | nzMaskStyle | 遮罩样式 | `object` |

components/drawer/drawer.component.ts

@@ -75,7 +75,9 @@ const NZ_CONFIG_COMPONENT_NAME = 'drawer';
                   <ng-container *nzStringTemplateOutlet="nzTitle"><div [innerHTML]="nzTitle"></div></ng-container>
                 </div>
                 <button *ngIf="nzClosable" (click)="closeClick()" aria-label="Close" class="ant-drawer-close" style="--scroll-bar: 0px;">
-                  <i nz-icon nzType="close"></i>
+                  <ng-container *nzStringTemplateOutlet="nzCloseIcon; let closeIcon">
+                    <i nz-icon [nzType]="closeIcon"></i>
+                  </ng-container>
                 </button>
               </div>
               <div class="ant-drawer-body" [ngStyle]="nzBodyStyle">
@@ -104,6 +106,7 @@ export class NzDrawerComponent<T = NzSafeAny, R = NzSafeAny, D = NzSafeAny> exte
   static ngAcceptInputType_nzCloseOnNavigation: BooleanInput;
 
   @Input() nzContent!: TemplateRef<{ $implicit: D; drawerRef: NzDrawerRef<R> }> | Type<T>;
+  @Input() nzCloseIcon: string | TemplateRef<void> = 'close';
   @Input() @InputBoolean() nzClosable: boolean = true;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzMaskClosable: boolean = true;
   @Input() @WithConfig(NZ_CONFIG_COMPONENT_NAME) @InputBoolean() nzMask: boolean = true;

components/drawer/drawer.spec.ts

@@ -101,6 +101,24 @@ describe('NzDrawerComponent', () => {
     expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(false);
   });
 
+  it('should set close icon work', () => {
+    component.open();
+    fixture.detectChanges();
+    expect(overlayContainerElement.querySelector('.ant-drawer .anticon-close')).toBeDefined();
+
+    component.closeIcon = 'close-circle';
+    fixture.detectChanges();
+    expect(overlayContainerElement.querySelector('.ant-drawer .anticon-close')).toBeNull();
+    expect(overlayContainerElement.querySelector('.ant-drawer .anticon-close-circle')).toBeDefined();
+
+    component.closeIcon = component.closeIconTemplateRef;
+    fixture.detectChanges();
+
+    expect(overlayContainerElement.querySelector('.ant-drawer .anticon-close')).toBeNull();
+    expect(overlayContainerElement.querySelector('.ant-drawer .anticon-close-circle')).toBeNull();
+    expect(overlayContainerElement.querySelector('.ant-drawer .anticon-close-square')).toBeDefined();
+  });
+
   it('should not close when click mask', () => {
     component.maskClosable = false;
     component.open();
@@ -188,7 +206,7 @@ describe('NzDrawerComponent', () => {
   });
 
   it('should support TemplateRef title', () => {
-    component.title = component.templateTitle;
+    component.title = component.titleTemplateRef;
     component.open();
     fixture.detectChanges();
     expect(overlayContainerElement.querySelector('.ant-drawer')!.classList.contains('ant-drawer-open')).toBe(true);
@@ -482,7 +500,8 @@ describe('NzDrawerService', () => {
 @Component({
   template: `
     <button (click)="open()">Open</button>
-    <ng-template #customTitle>
+    <ng-template #closeIconTemplate><i nz-icon nzType="close-circle" nzTheme="outline"></i></ng-template>
+    <ng-template #titleTemplate>
       <span class="custom-title">title</span>
       <button class="close-btn"></button>
     </ng-template>
@@ -492,6 +511,7 @@ describe('NzDrawerService', () => {
       [nzMaskClosable]="maskClosable"
       [nzWrapClassName]="'test-class'"
       [nzZIndex]="1001"
+      [nzCloseIcon]="closeIcon"
       [nzClosable]="closable"
       [nzMask]="showMask"
       [nzVisible]="visible"
@@ -521,9 +541,11 @@ class NzTestDrawerComponent {
   height: string | number = '300px';
   placement = 'left';
   noAnimation = false;
+  closeIcon?: TemplateRef<void> | string;
   offsetX = 0;
   offsetY = 0;
-  @ViewChild('customTitle', { static: false }) templateTitle!: TemplateRef<void>;
+  @ViewChild('titleTemplate', { static: false }) titleTemplateRef!: TemplateRef<void>;
+  @ViewChild('closeIconTemplate', { static: false }) closeIconTemplateRef!: TemplateRef<void>;
   @ViewChild(NzDrawerComponent, { static: false }) drawerComponent!: NzDrawerComponent;
 
   open(): void {