feat(module:*): global config

components/alert/nz-alert.component.html

@@ -26,10 +26,10 @@
     class="ant-alert-close-icon"
     (click)="closeAlert()">
     <ng-template #closeDefaultTemplate>
-      <i nz-icon type="close" class="anticon-close"></i>
+      <i nz-icon nzType="close"></i>
     </ng-template>
     <ng-container *ngIf="nzCloseText; else closeDefaultTemplate">
       <ng-container *nzStringTemplateOutlet="nzCloseText">{{ nzCloseText }}</ng-container>
     </ng-container>
   </a>
-</div>
+</div>

components/auto-complete/demo/certain-category.ts

@@ -16,7 +16,7 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@
         />
       </nz-input-group>
       <ng-template #suffixIcon>
-        <i nz-icon type="search"></i>
+        <i nz-icon nzType="search"></i>
       </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 type="search" theme="outline"></i>
+          <i nz-icon nzType="search" theme="outline"></i>
         </button>
       </ng-template>
       <nz-autocomplete #auto>

components/avatar/nz-avatar.component.html

@@ -1,3 +1,3 @@
-<i nz-icon *ngIf="nzIcon && hasIcon" [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
+<i nz-icon *ngIf="nzIcon && hasIcon" [nzType]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
 <img [src]="nzSrc" *ngIf="nzSrc && hasSrc" (error)="imgError()"/>
 <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>

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 type="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
+      <i nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></i>
     </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 type="minus"></i></button>
-        <button nz-button (click)="addCount()"><i nz-icon type="plus"></i></button>
+        <button nz-button (click)="minCount()"><i nz-icon nzType="minus"></i></button>
+        <button nz-button (click)="addCount()"><i nz-icon nzType="plus"></i></button>
       </nz-button-group>
     </div>
 

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 type="notification"></i></nz-badge>
-    <nz-badge nzDot [nzShowDot]="false"><i nz-icon type="notification"></i></nz-badge>
+    <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>
       <a>Link something</a>
     </nz-badge>

components/breadcrumb/demo/separator.ts

@@ -28,7 +28,7 @@ import { Component } from '@angular/core';
         An Application
       </nz-breadcrumb-item>
     </nz-breadcrumb>
-    <ng-template #iconTemplate><i nz-icon type="arrow-right"></i></ng-template>
+    <ng-template #iconTemplate><i nz-icon nzType="arrow-right"></i></ng-template>
   `,
   styles: [
     `

components/breadcrumb/demo/withIcon.ts

@@ -5,10 +5,10 @@ import { Component } from '@angular/core';
   template: `
     <nz-breadcrumb>
       <nz-breadcrumb-item>
-        <i nz-icon type="home"></i>
+        <i nz-icon nzType="home"></i>
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
-        <a><i nz-icon type="user"></i><span>Application List</span></a>
+        <a><i nz-icon nzType="user"></i><span>Application List</span></a>
       </nz-breadcrumb-item>
       <nz-breadcrumb-item>
         Application

components/button/demo/button-group.ts

@@ -21,12 +21,12 @@ import { Component } from '@angular/core';
     </nz-button-group>
     <h4>With Icon</h4>
     <nz-button-group>
-      <button nz-button nzType="primary"><i nz-icon type="left"></i> Go back</button>
-      <button nz-button nzType="primary">Go forward<i nz-icon type="right"></i></button>
+      <button nz-button nzType="primary"><i nz-icon nzType="left"></i> Go back</button>
+      <button nz-button nzType="primary">Go forward<i nz-icon nzType="right"></i></button>
     </nz-button-group>
     <nz-button-group>
-      <button nz-button nzType="primary"><i nz-icon type="cloud"></i></button>
-      <button nz-button nzType="primary"><i nz-icon type="cloud-download"></i></button>
+      <button nz-button nzType="primary"><i nz-icon nzType="cloud"></i></button>
+      <button nz-button nzType="primary"><i nz-icon nzType="cloud-download"></i></button>
     </nz-button-group>
   `,
   styles: [

components/button/demo/icon.ts

@@ -3,15 +3,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-button-icon',
   template: `
-    <button nz-button nzType="primary" nzShape="circle"><i nz-icon type="search"></i></button>
-    <button nz-button nzType="primary"><i nz-icon type="search"></i>Search</button>
-    <button nz-button nzType="default" nzShape="circle"><i nz-icon type="search"></i></button>
-    <button nz-button nzType="default"><i nz-icon type="search"></i>Search</button>
+    <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="primary"><i nz-icon nzType="search"></i>Search</button>
+    <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
     <br />
-    <button nz-button nzType="default" nzShape="circle"><i nz-icon type="search"></i></button>
-    <button nz-button nzType="default"><i nz-icon type="search"></i>Search</button>
-    <button nz-button nzType="dashed" nzShape="circle"><i nz-icon type="search"></i></button>
-    <button nz-button nzType="dashed"><i nz-icon type="search"></i>Search</button>
+    <button nz-button nzType="default" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="default"><i nz-icon nzType="search"></i>Search</button>
+    <button nz-button nzType="dashed" nzShape="circle"><i nz-icon nzType="search"></i></button>
+    <button nz-button nzType="dashed"><i nz-icon nzType="search"></i>Search</button>
   `,
   styles: [
     `

components/button/demo/loading.ts

@@ -3,12 +3,12 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-button-loading',
   template: `
-    <button nz-button nzType="primary" nzLoading><i nz-icon type="poweroff"></i>Loading</button>
+    <button nz-button nzType="primary" nzLoading><i nz-icon nzType="poweroff"></i>Loading</button>
     <button nz-button nzType="primary" nzSize="small" nzLoading>Loading</button>
     <br />
     <button nz-button nzType="primary" (click)="loadOne()" [nzLoading]="isLoadingOne">Click me!</button>
     <button nz-button nzType="primary" (click)="loadTwo()" [nzLoading]="isLoadingTwo">
-      <i nz-icon type="poweroff"></i>Click me!
+      <i nz-icon nzType="poweroff"></i>Click me!
     </button>
     <br />
     <button nz-button nzLoading nzShape="circle"></button>

components/button/demo/multiple.ts

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
     <button nz-button nzType="primary">primary</button>
     <button nz-button nzType="default">secondary</button>
     <nz-dropdown>
-      <button nz-button nz-dropdown>Actions<i nz-icon type="down"></i></button>
+      <button nz-button nz-dropdown>Actions<i nz-icon nzType="down"></i></button>
       <ul nz-menu>
         <li nz-menu-item>
           <a>1st item</a>

components/button/demo/size.ts

@@ -16,13 +16,15 @@ import { Component } from '@angular/core';
     <button nz-button [nzSize]="size" nzType="danger">Danger</button>
     <button nz-button [nzSize]="size" nzType="link">Link</button>
     <br />
-    <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon type="download"></i></button>
-    <button nz-button nzType="primary" [nzSize]="size" nzShape="round"><i nz-icon type="download"></i>Download</button>
-    <button nz-button nzType="primary" [nzSize]="size"><i nz-icon type="download"></i>Download</button>
+    <button nz-button nzType="primary" [nzSize]="size" nzShape="circle"><i nz-icon nzType="download"></i></button>
+    <button nz-button nzType="primary" [nzSize]="size" nzShape="round">
+      <i nz-icon nzType="download"></i>Download
+    </button>
+    <button nz-button nzType="primary" [nzSize]="size"><i nz-icon nzType="download"></i>Download</button>
     <br />
     <nz-button-group [nzSize]="size">
-      <button nz-button nzType="primary"><i nz-icon type="left"></i>Backward</button>
-      <button nz-button nzType="primary">Forward<i nz-icon type="right"></i></button>
+      <button nz-button nzType="primary"><i nz-icon nzType="left"></i>Backward</button>
+      <button nz-button nzType="primary">Forward<i nz-icon nzType="right"></i></button>
     </nz-button-group>
   `,
   styles: [

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

@@ -24,11 +24,11 @@ import { NzButtonModule } from 'ng-zorro-antd';
 
 To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`disabled`.
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| Property | Description | Type | Default | Global Config |
+| -------- | ----------- | ---- | ------- | ------------- |
 | `[nzGhost]` | make background transparent and invert text and border colors | `boolean` | `false` |
 | `[nzLoading]` | set the loading status of button | `boolean` | `false` |
 | `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'｜'round'` | - |
-| `[nzSize]` | can be set to `small` `large` or omitted | `'large'｜'small'｜'default'` | `'default'` |
+| `[nzSize]` | can be set to `small` `large` or omitted | `'large'｜'small'｜'default'` | `'default'` | ✅ |
 | `[nzType]` | can be set to `primary` `dashed` `danger` or omitted (meaning `default`) | `'primary'｜'dashed'｜'danger'｜'default'｜'link'` | `'default'` |
-| `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` |
+| `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` | ✅ |

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

@@ -28,11 +28,11 @@ import { NzButtonModule } from 'ng-zorro-antd';
 按钮的属性说明如下：
 
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
+| 属性 | 说明 | 类型 | 默认值 | 支持全局配置 |
+| --- | --- | --- | --- | --- |
 | `[nzGhost]` | 幽灵属性，使按钮背景透明 | `boolean` | `false` |
 | `[nzLoading]` | 设置按钮载入状态 | `boolean` | `false` |
 | `[nzShape]` | 设置按钮形状，可选值为 `circle` `round` 或者不设 | `'circle'｜'round'` | - |
-| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'｜'small'｜'default'` | `'default'` |
+| `[nzSize]` | 设置按钮大小，可选值为 `small` `large` 或者不设 | `'large'｜'small'｜'default'` | `'default'` | ✅ |
 | `[nzType]` | 设置按钮类型，可选值为 `primary` `dashed` `danger` 或者不设 | `'primary'｜'dashed'｜'danger'｜'default'｜'link'` | `'default'` |
-| `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` |
+| `[nzBlock]` | 将按钮宽度调整为其父宽度的选项 | `boolean` | `false` | ✅ |

components/button/nz-button.component.html

@@ -1,2 +1,2 @@
-<i nz-icon type="loading" *ngIf="nzLoading"></i>
-<span #contentElement><ng-content></ng-content></span>
+<i nz-icon nzType="loading" *ngIf="nzLoading"></i>
+<span #contentElement><ng-content></ng-content></span>

components/button/nz-button.component.ts

@@ -36,12 +36,14 @@ import {
   findLastNotEmptyNode,
   isEmpty,
   InputBoolean,
+  NzConfigService,
   NzSizeLDSType,
   NzSizeMap,
   NzUpdateHostClassService,
   NzWaveConfig,
   NzWaveDirective,
-  NZ_WAVE_GLOBAL_CONFIG
+  NZ_WAVE_GLOBAL_CONFIG,
+  WithConfig
 } from 'ng-zorro-antd/core';
 import { NzIconDirective } from 'ng-zorro-antd/icon';
 import { Subject } from 'rxjs';
@@ -50,6 +52,8 @@ import { startWith, takeUntil } from 'rxjs/operators';
 export type NzButtonType = 'primary' | 'dashed' | 'danger' | 'default' | 'link';
 export type NzButtonShape = 'circle' | 'round' | null;
 
+const componentName = 'nzButton';
+
 @Component({
   selector: '[nz-button]',
   exportAs: 'nzButton',
@@ -60,10 +64,6 @@ export type NzButtonShape = 'circle' | 'round' | null;
   templateUrl: './nz-button.component.html'
 })
 export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, OnChanges {
-  readonly el: HTMLElement = this.elementRef.nativeElement;
-  private iconElement: HTMLElement;
-  private iconOnly = false;
-  private destroy$ = new Subject();
   @ViewChild('contentElement', { static: true }) contentElement: ElementRef;
   @ContentChildren(NzIconDirective, { read: ElementRef }) listOfIconElement: QueryList<ElementRef>;
   @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(
@@ -72,13 +72,20 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
     this.waveConfig,
     this.animationType
   );
-  @Input() @InputBoolean() nzBlock = false;
-  @Input() @InputBoolean() nzGhost = false;
-  @Input() @InputBoolean() nzSearch = false;
-  @Input() @InputBoolean() nzLoading = false;
+
+  @Input() @WithConfig(componentName, false) @InputBoolean() nzBlock: boolean;
+  @Input() @InputBoolean() nzGhost: boolean = false;
+  @Input() @InputBoolean() nzSearch: boolean = false;
+  @Input() @InputBoolean() nzLoading: boolean = false;
   @Input() nzType: NzButtonType = 'default';
-  @Input() nzShape: NzButtonShape = null;
-  @Input() nzSize: NzSizeLDSType = 'default';
+  @Input() @WithConfig(componentName, null) nzShape: NzButtonShape;
+  @Input() @WithConfig(componentName, 'default') nzSize: NzSizeLDSType;
+
+  readonly el: HTMLElement = this.elementRef.nativeElement;
+
+  private iconElement: HTMLElement;
+  private iconOnly = false;
+  private destroy$ = new Subject<void>();
 
   /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289 */
   setClassMap(): void {
@@ -143,10 +150,18 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O
     private contentObserver: ContentObserver,
     private nzUpdateHostClassService: NzUpdateHostClassService,
     private ngZone: NgZone,
+    public nzConfigService: NzConfigService,
     @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private waveConfig: NzWaveConfig,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationType: string
   ) {
     this.renderer.addClass(elementRef.nativeElement, 'ant-btn');
+    this.nzConfigService
+      .getConfigChangeEventForComponent(componentName)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.setClassMap();
+        this.cdr.markForCheck();
+      });
   }
 
   ngAfterContentInit(): void {

components/button/nz-button.spec.ts

@@ -383,7 +383,7 @@ export class NzTestButtonSearchComponent {}
 @Component({
   template: `
     <button nz-button nzType="primary" (click)="load()" [nzLoading]="loading">
-      <i nz-icon type="poweroff"></i> {{ 'Click me!' }}
+      <i nz-icon nzType="poweroff"></i> {{ 'Click me!' }}
     </button>
   `
 })
@@ -400,7 +400,7 @@ export class NzTestButtonBindingComponent {
   template: `
     <button nz-button>
       {{ title }}
-      <i nz-icon type="caret-down"></i>
+      <i nz-icon nzType="caret-down"></i>
     </button>
   `
 })

components/card/demo/loading.ts

@@ -24,13 +24,13 @@ import { Component } from '@angular/core';
       <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
     </ng-template>
     <ng-template #actionSetting>
-      <i nz-icon type="setting"></i>
+      <i nz-icon nzType="setting"></i>
     </ng-template>
     <ng-template #actionEdit>
-      <i nz-icon type="edit"></i>
+      <i nz-icon nzType="edit"></i>
     </ng-template>
     <ng-template #actionEllipsis>
-      <i nz-icon type="ellipsis"></i>
+      <i nz-icon nzType="ellipsis"></i>
     </ng-template>
   `
 })

components/card/demo/meta.ts

@@ -17,13 +17,13 @@ import { Component } from '@angular/core';
       <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
     </ng-template>
     <ng-template #actionSetting>
-      <i nz-icon type="setting"></i>
+      <i nz-icon nzType="setting"></i>
     </ng-template>
     <ng-template #actionEdit>
-      <i nz-icon type="edit"></i>
+      <i nz-icon nzType="edit"></i>
     </ng-template>
     <ng-template #actionEllipsis>
-      <i nz-icon type="ellipsis"></i>
+      <i nz-icon nzType="ellipsis"></i>
     </ng-template>
   `
 })

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

@@ -27,18 +27,18 @@ import { NzCardModule } from 'ng-zorro-antd';
 
 ### nz-card
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
+| Property | Description | Type | Default | Global Config |
+| -------- | ----------- | ---- | ------- | ------------- |
 | `[nzActions]` | The action list, shows at the bottom of the Card. | `Array<TemplateRef<void>>` | - |
 | `[nzBodyStyle]` | Inline style to apply to the card content | `{ [key: string]: string }` | - |
-| `[nzBordered]` | Toggles rendering of the border around the card | `boolean` | `true` |
+| `[nzBordered]` | Toggles rendering of the border around the card | `boolean` | `true` | ✅ |
 | `[nzCover]` | Card cover | `TemplateRef<void>` | - |
 | `[nzExtra]` | Content to render in the top-right corner of the card | `string｜TemplateRef<void>` | - |
-| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` |
+| `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | ✅ |
 | `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` |
 | `[nzTitle]` | Card title | `string｜TemplateRef<void>` | - |
 | `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - |
-| `[nzSize]` | Size of card | `'default'｜'small'` | `'default'` |
+| `[nzSize]` | Size of card | `'default'｜'small'` | `'default'` | ✅ |
 
 
 ### nz-card-meta