NG-ZORRO · vthinkxie · Jan 17, 2019 · Jan 17, 2019 · Jan 17, 2019 · Jan 17, 2019
@@ -2,7 +2,7 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { NzIconModule } from '../icon/nz-icon.module';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 
 import { NzAvatarComponent } from './nz-avatar.component';
 import { NzAvatarModule } from './nz-avatar.module';
@@ -20,7 +20,7 @@ describe('avatar', () => {
   let dl: DebugElement;
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ NzAvatarModule, NzIconModule ],
+      imports: [ NzAvatarModule, NzIconTestModule ],
       declarations: [ TestAvatarComponent ]
     }).compileComponents();
     fixture = TestBed.createComponent(TestAvatarComponent);

@@ -1,14 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { Component, NgZone } from '@angular/core';
+import { Component } from '@angular/core';
 import { async, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { ArrowRightOutline } from '@ant-design/icons-angular/icons';
 
 import { dispatchMouseEvent } from '../core/testing';
-import { NzIconModule } from '../icon/nz-icon.module';
-import { NZ_ICONS } from '../icon/nz-icon.service';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 
 import { NzDemoBreadcrumbBasicComponent } from './demo/basic';
 import { NzDemoBreadcrumbSeparatorComponent } from './demo/separator';
@@ -51,9 +49,8 @@ describe('breadcrumb', () => {
     let breadcrumbs;
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-        imports     : [ NzBreadCrumbModule, NzIconModule ],
-        declarations: [ NzDemoBreadcrumbSeparatorComponent ],
-        providers   : [ { provide: NZ_ICONS, useValue: [ ArrowRightOutline ] } ]
+        imports     : [ NzBreadCrumbModule, NzIconTestModule ],
+        declarations: [ NzDemoBreadcrumbSeparatorComponent ]
       }).compileComponents();
     }));
 

@@ -1,7 +1,8 @@
 import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { async, fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { NzIconModule } from '../icon/nz-icon.module';
+
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 
 import { NzDemoButtonBasicComponent } from './demo/basic';
 import { NzDemoButtonBlockComponent } from './demo/block';
@@ -116,7 +117,7 @@ describe('button', () => {
     let buttons;
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-        imports     : [ NzButtonModule, NzIconModule ],
+        imports     : [ NzButtonModule, NzIconTestModule ],
         declarations: [ NzDemoButtonIconComponent ],
         providers   : []
       }).compileComponents();
@@ -141,7 +142,7 @@ describe('button', () => {
     let buttons;
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-        imports     : [ NzButtonModule, NzIconModule ],
+        imports     : [ NzButtonModule, NzIconTestModule ],
         declarations: [ NzDemoButtonLoadingComponent ],
         providers   : []
       }).compileComponents();
@@ -179,8 +180,9 @@ describe('button', () => {
       const button = buttons[ 3 ];
       fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false);
-      expect(button.nativeElement.firstElementChild.querySelector('svg')).toBe(null);
+      expect(button.nativeElement.firstElementChild.querySelector('svg')).not.toBe(null);
       expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(false);
+      expect(button.nativeElement.firstElementChild.classList.contains('anticon-poweroff')).toBe(true);
       expect(button.nativeElement.firstElementChild.localName).toBe('i');
       button.nativeElement.click();
       fixture.detectChanges();
@@ -193,8 +195,9 @@ describe('button', () => {
       tick(5000);
       fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false);
-      expect(button.nativeElement.firstElementChild.querySelector('svg')).toBe(null);
+      expect(button.nativeElement.firstElementChild.querySelector('svg')).not.toBe(null);
       expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(false);
+      expect(button.nativeElement.firstElementChild.classList.contains('anticon-poweroff')).toBe(true);
       expect(button.nativeElement.firstElementChild.localName).toBe('i');
     }));
   });
@@ -285,7 +288,7 @@ describe('button', () => {
     let button;
     beforeEach(async(() => {
       TestBed.configureTestingModule({
-        imports     : [ NzButtonModule, NzIconModule ],
+        imports     : [ NzButtonModule, NzIconTestModule ],
         declarations: [ NzTestButtonBindingComponent ],
         providers   : []
       }).compileComponents();
@@ -302,7 +305,8 @@ describe('button', () => {
       tick();
       fixture.detectChanges();
       expect(button.nativeElement.classList.contains('ant-btn-loading')).toBe(false);
-      expect(button.nativeElement.firstElementChild.querySelector('svg')).toBe(null);
+      expect(button.nativeElement.firstElementChild.querySelector('svg')).not.toBe(null);
+      expect(button.nativeElement.firstElementChild.classList.contains('anticon-poweroff')).toBe(true);
       expect(button.nativeElement.firstElementChild.classList.contains('anticon-loading')).toBe(false);
       button.nativeElement.click();
       fixture.detectChanges();

@@ -2,7 +2,7 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { NzIconModule } from '../icon/nz-icon.module';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 
 import { NzDividerComponent } from './nz-divider.component';
 import { NzDividerModule } from './nz-divider.module';
@@ -13,7 +13,7 @@ describe('divider', () => {
   let dl: DebugElement;
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ NzDividerModule, NzIconModule ],
+      imports: [ NzDividerModule, NzIconTestModule ],
       declarations: [ TestDividerComponent, TestDividerTextTemplateComponent ]
     }).compileComponents();
     fixture = TestBed.createComponent(TestDividerComponent);

@@ -8,7 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Subject } from 'rxjs';
 
 import { createMouseEvent, dispatchFakeEvent } from '../core/testing';
-import { NzIconModule } from '../icon/nz-icon.module';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 import { NzMenuModule } from '../menu/nz-menu.module';
 import { NzSubMenuComponent } from '../menu/nz-submenu.component';
 
@@ -25,7 +25,7 @@ describe('dropdown', () => {
   beforeEach(async(() => {
     const dir = 'ltr';
     TestBed.configureTestingModule({
-      imports     : [ NzMenuModule, NoopAnimationsModule, NzDropDownModule, NoopAnimationsModule, NzIconModule ],
+      imports     : [ NzMenuModule, NoopAnimationsModule, NzDropDownModule, NoopAnimationsModule, NzIconTestModule ],
       declarations: [ NzTestDropdownComponent, NzTestDropdownButtonComponent, NzTestDropdownWithButtonComponent, NzTestDropdownContextmenuComponent ],
       providers   : [
         NzDropdownService,

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+    zh-CN: 命名空间
+    en-US: Namespace
+---
+
+## zh-CN
+
+可以使用命名空间来添加自定义的 Icon，支持静态加载和动态加载。
+
+## en-US
+
+You can use namespace to add your own icons. Static loading and dynamic loading are both supported.
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { NzIconService } from 'ng-zorro-antd';
+
+const ngZorroIconLiteral = '<svg viewBox="0 0 191.51 200.02"><defs><style>.cls-1{fill:url(#gradient);}.cls-2{fill:url(#gradient_2);}.cls-3{fill:url(#gradient_3);}.cls-4{fill:url(#gradient_4);}</style><linearGradient id="gradient" x1="-707.73" y1="-878.65" x2="-708.33" y2="-876.24" gradientTransform="translate(37930.58 45419.66) scale(53.42 51.67)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fa8e7d"/><stop offset="0.51" stop-color="#f74a5c"/><stop offset="1" stop-color="#f51d2c"/></linearGradient><linearGradient id="gradient_2" x1="-705.58" y1="-878.66" x2="-705.71" y2="-876.05" gradientTransform="translate(32954.36 51169) scale(46.48 58.25)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fa816e"/><stop offset="0.41" stop-color="#f74a5c"/><stop offset="1" stop-color="#f51d2c"/></linearGradient><linearGradient id="gradient_3" x1="-716.36" y1="-876.62" x2="-715.52" y2="-876.95" gradientTransform="translate(81756.69 109702) scale(114.08 125)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4285eb"/><stop offset="1" stop-color="#2ec7ff"/></linearGradient><linearGradient id="gradient_4" x1="-716.42" y1="-877.48" x2="-715.45" y2="-876.08" gradientTransform="translate(81756.69 97845.48) scale(114.08 111.47)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#29cdff"/><stop offset="0.38" stop-color="#148eff"/><stop offset="1" stop-color="#0a60ff"/></linearGradient></defs><title>ng-icon</title><path class="cls-1" d="M122.4,121.6l-4.4-10H80.7l-4.4,10.3a34,34,0,0,1-4.4,8.1c-1.2,1.3-3.2,2.1-6,2.1a9.78,9.78,0,0,1-6.3-2.3,6.27,6.27,0,0,1-2.7-5.1,9.28,9.28,0,0,1,.7-3.3c.4-1,1.1-2.8,2.1-4.8L83.2,64.7c.7-1.5,1.5-3.3,2.4-5.3a21,21,0,0,1,3.1-5.2A12,12,0,0,1,93,50.9a15.17,15.17,0,0,1,6.4-1.3,14.22,14.22,0,0,1,6.5,1.3,13,13,0,0,1,4.3,3.3,17.94,17.94,0,0,1,2.7,4.4c.7,1.6,1.6,3.6,2.8,6.1l24,51.6c1.9,3.9,2.8,6.8,2.8,8.5a6.55,6.55,0,0,1-2.7,5.1,9,9,0,0,1-6.4,2.3,9.75,9.75,0,0,1-3.7-.7,7.36,7.36,0,0,1-2.7-1.9,17.34,17.34,0,0,1-2.3-3.6,27.11,27.11,0,0,1-2.3-4.4ZM85.5,99.3H113L99.1,66.4Z" transform="translate(-3.87 -0.08)"/><path class="cls-2" d="M181.1,27.7l-45-16.18a10.24,10.24,0,0,0-4.5-.72c-4.91.36-10.7,4.64-10.7,10.7a10.7,10.7,0,0,0,7.3,10.1l45.7,16.3-4.77,42.32a11.26,11.26,0,0,0,0,3.13c.66,4.35,4.3,10.57,10.44,10.76,5.67.17,9.56-5.13,10.87-8.79a12.49,12.49,0,0,0,.71-3.56L195.3,50.1a21.85,21.85,0,0,0-14.2-22.4Z" transform="translate(-3.87 -0.08)"/><path class="cls-3" d="M186.3,132a10.24,10.24,0,0,0,0-2.6c-.59-4.57-4.62-10.71-10.7-10.7-6.27,0-9.94,6.56-10.7,10.7a11.05,11.05,0,0,0-.18,1.66l-1.22,14-64,33.5-64-33.5L25.1,47.8,98.9,21.61c.32-.12,1.32-.43,1.5-.47,5.19-1.92,8.37-5.6,8.4-10.34,0-6.14-5.87-10.3-10.7-10.7a14.6,14.6,0,0,0-4.51.67L18,27.8A21.19,21.19,0,0,0,4,50.2l10.4,97.3a21.45,21.45,0,0,0,11.3,16.7l64,33.5a21.41,21.41,0,0,0,19.7,0l64-33.5a21.53,21.53,0,0,0,11.3-16.7l1.6-14.9Z" transform="translate(-3.87 -0.08)"/><path class="cls-4" d="M186.44,132a14.11,14.11,0,0,0-.14-2.58,13.89,13.89,0,0,0-2.25-5.87c-.35-.49-3.56-4.84-8.45-4.83-5.76,0-9.86,6.08-10.7,10.7a15.33,15.33,0,0,0-.18,1.94c-.21,3.28-.58,7.91-1.22,13.76l-64,33.5-64-33.5L25.1,47.8c-1.1-10.9,2.3-19.6,10-26.1l-17,6.1a21.19,21.19,0,0,0-14,22.4l10.4,97.3a21.45,21.45,0,0,0,11.3,16.7l64,33.5a21.41,21.41,0,0,0,19.7,0l64-33.5a21.53,21.53,0,0,0,11.3-16.7Z" transform="translate(-3.87 -0.08)"/></svg>';
+
+@Component({
+  selector: 'nz-demo-icon-namespace',
+  template: `
+    <div class="icons-list">
+      <i nz-icon type="ng-zorro:antd"></i>
+    </div>
+  `,
+  styles: [ `
+    [nz-icon] {
+      margin-right: 6px;
+      font-size: 24px;
+    }
+  ` ]
+})
+export class NzDemoIconNamespaceComponent {
+  constructor(private _iconService: NzIconService) {
+    this._iconService.addIconLiteral('ng-zorro:antd', ngZorroIconLiteral);
+  }
+}
@@ -30,20 +30,22 @@ We are still adding two-tone icons right now, syncing to [antd](https://ant.desi
 | `[twoToneColor]` | Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - |
 | `[iconfont]` | Type of the icon from iconfont | `string` | - |
 
+
 ### NzIconService
 
-| Methods/Properties | Description | Parameters |
-| -------- | ----------- | ---- |
-| `twoToneColor` | To set the default primary color of twotone icons, use Ant Design's official blue by default | `TwoToneColorPaletteSetter` |
-| `addIcon()` | To import icons statically | `IconDefinition` |
-| `fetchFromIconfont()` | To get icon assets from fonticon | `NzIconfontOption` |
-| `changeAssetsSource()` |  To change the location of your icon assets, so that you can deploy these icons wherever you want | `string` |
+| Methods/Properties     | Description                                                                                      | Parameters                  |
+| ---------------------- | ------------------------------------------------------------------------------------------------ | --------------------------- |
+| `twoToneColor`         | To set the default primary color of twotone icons, use Ant Design's official blue by default     | `TwoToneColorPaletteSetter` |
+| `addIcon()`            | To import icons statically                                                                       | `IconDefinition`            |
+| `addIconLiteral()`     | To statically import custom icons                                                                | `string`, `string (SVG)`    |
+| `fetchFromIconfont()`  | To get icon assets from fonticon                                                                 | `NzIconfontOption`          |
+| `changeAssetsSource()` | To change the location of your icon assets, so that you can deploy these icons wherever you want | `string`                    |
 
 ### InjectionToken
 
-| Token | Description | Parameters |
-| ----- | --- | ---- |
-| `NZ_ICONS` | To import icons statically | `IconDefinition[]`, `useValue` |
+| Token                           | Description                                                                                  | Parameters                       |
+| ------------------------------- | -------------------------------------------------------------------------------------------- | -------------------------------- |
+| `NZ_ICONS`                      | To import icons statically                                                                   | `IconDefinition[]`, `useValue`   |
 | `NZ_ICON_DEFAULT_TWOTONE_COLOR` | To set the default primary color of twotone icons, use Ant Design's official blue by default | `string (hex color)`, `useValue` |
 
 ### SVG icons
@@ -167,6 +169,14 @@ The property scriptUrl should be set to import the svg sprite symbols.
 
 See [iconfont.cn](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) documents to learn about how to generate scriptUrl.
 
+### Namespace
+
+After `7.0.0-rc.4`, we introduced namespace so you could add your own icons in a convenient way. When you wan to render an icon, you could assign `type` `namespace:name`. Dynamic importing and static importing are both supported.
+
+Static importing. Invoke `addIconLiteral` of `NzIconService`.
+
+Dynamic importing. Make sure that you have put your SVG resources in dir like `assets/${namespace}`. For example, if you have a `panda` icon and in `zoo` namespace, you should put `panda.svg` in `assets/zoo`.
+
 ## FAQ
 
 ### All my icons are gone!