add demo

components/icon/demo/custom.ts

@@ -31,4 +31,4 @@ import { Component } from '@angular/core';
   ` ]
 })
 export class NzDemoIconCustomComponent {
-}
+}

components/icon/nz-icon.directive.ts

@@ -9,7 +9,7 @@ import {
   OnInit,
   Renderer2
 } from '@angular/core';
-import { IconDirective } from 'ant-icons-angular';
+import { IconDirective } from '@ant-design/icons-angular';
 import { NzIconService } from './nz-icon.service';
 
 /**
@@ -27,34 +27,39 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   @Input() iconfont: string;
 
   // private _renderer: Renderer2;
-  private _classObserver: MutationObserver;
+  private _classNameObserver: MutationObserver;
 
   /**
    * In order to make this directive compatible to old API, we had do some ugly stuff here.
    * Should be removed in next major version.
    */
   private _classChangeHandler(className: string): void {
-    const getTypeName = function (): string {
-      // NOTE: bad case multi space
-      const iconClass = className.split(/\s/).filter(names => names.indexOf('anticon') === 0 && names !== 'anticon');
-      // TODO: remove spin
-      return iconClass.length ? iconClass[ 0 ].replace('anticon-', '') : '';
-    };
+    if (!className) {
+      return;
+    }
+
+    const classArr = className.split(/\s/);
+    const hasAnticonTag = className.indexOf('anticon') > -1;
+    const autoSpin = className.indexOf('anticon-loading') > -1;
+    let anticonType = classArr.filter(cls => cls !== 'anticon' && cls !== 'anticon-spin' && cls.startsWith('anticon-'))[ 0 ];
 
-    let newType = getTypeName();
-    if (!newType) {
+    if (!hasAnticonTag || !anticonType) {
       return;
+    } else {
+      anticonType = anticonType.replace('anticon-', '');
     }
+
     // This is misspelled in old versions...
-    if (newType.indexOf('verticle') > -1) {
+    if (anticonType.indexOf('verticle') > -1) {
       console.error(`'verticle' is misspelled, would be corrected in the next major version.`);
-      newType = newType.replace('verticle', 'vertical');
+      anticonType = anticonType.replace('verticle', 'vertical');
     }
-    if (!newType.endsWith('-o')) {
-      newType += '-o';
+    if (!anticonType.endsWith('-o')) {
+      anticonType += '-o';
     }
-    if (this.type !== newType) {
-      this.type = newType;
+    this.spin = autoSpin || this.spin;
+    if (this.type !== anticonType) {
+      this.type = anticonType;
       this._changeIcon().then(svg => {
         this._addExtraModifications(svg);
       });
@@ -77,12 +82,9 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   }
 
   constructor(public _iconService: NzIconService, public _elementRef: ElementRef, public _renderer: Renderer2) {
-    super(_iconService, _elementRef); // NzIconService extends IconService so IconDirective won't complain.
+    super(_iconService, _elementRef, _renderer); // NzIconService extends IconService so IconDirective won't complain.
   }
 
-  /**
-   * Override this method to check if the icon need to be spin.
-   */
   ngOnChanges(): void {
     if (!this.iconfont) {
       this._changeIcon().then(svg => {
@@ -91,6 +93,8 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     } else {
       this._setSVGElement(this._iconService.createIconfontIcon(`#${this.iconfont}`));
     }
+
+    console.log('huh!?')
   }
 
   /**
@@ -100,30 +104,32 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     const element = this._elementRef.nativeElement as HTMLElement;
     if (element && element.className.indexOf('anticon') > -1) {
       this._warnAPI();
-      this._classChangeHandler(element.className);
-      this._classObserver = new MutationObserver((mutations: MutationRecord[]) => {
+      this._classChangeHandler(element.className); // In case mutations didn't catch the init status.
+      this._classNameObserver = new MutationObserver((mutations: MutationRecord[]) => {
         mutations
-        .filter((mutation: MutationRecord) => mutation.attributeName === 'class')
-        // TODO: class list
-        .forEach((mutation: MutationRecord) => this._classChangeHandler((mutation.target as HTMLElement).className));
+          .filter((mutation: MutationRecord) => mutation.attributeName === 'class')
+          .forEach((mutation: MutationRecord) => this._classChangeHandler((mutation.target as HTMLElement).className));
       });
-      this._classObserver.observe(this._elementRef.nativeElement, { attributes: true });
+      this._classNameObserver.observe(this._elementRef.nativeElement, { attributes: true });
     }
 
     // this._renderer = this._rendererFactory.createRenderer(null, null);
     this._renderer.addClass(this._elementRef.nativeElement, 'anticon');
   }
 
   ngOnDestroy(): void {
-    if (this._classObserver) {
-      this._classObserver.disconnect();
+    if (this._classNameObserver) {
+      this._classNameObserver.disconnect();
     }
   }
 
+  /**
+   * If custom content is provided, should try to normalize the svg element.
+   */
   ngAfterContentChecked(): void {
     const children = (this._elementRef.nativeElement as HTMLElement).children;
     if (children && children.length && !this.type) {
-      const child = children[0];
+      const child = children[ 0 ];
       this._iconService.normalizeSvgElement(child as SVGElement);
     }
   }

components/icon/nz-icon.service.ts

@@ -1,7 +1,7 @@
 import { DOCUMENT } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Inject, Injectable, Optional, RendererFactory2 } from '@angular/core';
-import { IconService } from 'ant-icons-angular';
+import { IconService } from '@ant-design/icons-angular';
 
 export interface NzIconfontOption {
   scriptUrl: string;
@@ -54,5 +54,9 @@ export class NzIconService extends IconService {
     @Optional() @Inject(DOCUMENT) protected _document: any
   ) {
     super(_rendererFactory, _http, _document);
+
+    // TODO: Register icons that NG-ZORRO use inside other components here.
+    const innerZorroIcons = [  ];
+    // this._addIconLiteral();
   }
 }

components/icon/page/en-US.txt

@@ -0,0 +1,9 @@
+{
+  chooseTheme: 'Select the Icon Theme',
+  direction: 'Directional Icons',
+  suggestion: 'Suggested Icons',
+  edit: 'Editor Icons',
+  data: 'Data Icons',
+  other: 'Application Icons',
+  logo: 'Brand and Logos'
+}