+ `,
+ styles: [ `
+ .icons-list > .anticon {
+ margin-right: 6px;
+ font-size: 24px;
+ }
+ `]
+})
+export class NzDemoIconBasicComponent {
+}
diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md
new file mode 100644
index 00000000000..7e762651479
--- /dev/null
+++ b/components/icon/demo/custom.md
@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+ zh-CN: 自定义图标
+ en-US: Custom icon
+---
+
+## zh-CN
+
+你可以直接将 `svg` 标签放在 `nz-icon` 中来渲染自定义内容，我们会为你处理大小和颜色等问题。
+
+## en-US
+
+You can just put a `svg` element inside of a `nz-icon` to render custom content. We would take care of size and color things for you.
diff --git a/components/icon/demo/custom.ts b/components/icon/demo/custom.ts
new file mode 100644
index 00000000000..69c2565c4ea
--- /dev/null
+++ b/components/icon/demo/custom.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-icon-custom',
+ template: `
+
+
+
+
+
+
+
+
+ `,
+ styles : [ `
+ .icons-list > .anticon {
+ margin-right: 6px;
+ font-size: 24px;
+ }
+ ` ]
+})
+export class NzDemoIconCustomComponent {
+}
diff --git a/components/icon/demo/iconfont.md b/components/icon/demo/iconfont.md
new file mode 100644
index 00000000000..34671947f16
--- /dev/null
+++ b/components/icon/demo/iconfont.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+ zh-CN: 使用 Iconfont.cn
+ en-US: Use iconfont.cn
+---
+
+## zh-CN
+
+对于使用 [iconfont.cn](http://iconfont.cn/) 的用户，通过设置 `fetchFromIconfont` 方法参数对象中的 `scriptUrl` 字段，即可轻松地使用已有项目中的图标。
+
+## en-US
+
+If you are using [iconfont.cn](http://iconfont.cn/), you can use the icons in your project gracefully.
diff --git a/components/icon/demo/iconfont.ts b/components/icon/demo/iconfont.ts
new file mode 100644
index 00000000000..fc831526384
--- /dev/null
+++ b/components/icon/demo/iconfont.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { NzIconService } from 'ng-zorro-antd';
+
+@Component({
+ selector: 'nz-demo-icon-iconfont',
+ template: `
+
+
+
+
+
+ `,
+ styles : [ `
+ .icons-list > .anticon {
+ margin-right: 6px;
+ font-size: 24px;
+ }
+ ` ]
+})
+export class NzDemoIconIconfontComponent {
+ constructor(private _iconService: NzIconService) {
+ this._iconService.fetchFromIconfont({
+ scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js'
+ });
+ }
+}
diff --git a/components/icon/demo/twotone.md b/components/icon/demo/twotone.md
new file mode 100644
index 00000000000..dbfe7c391db
--- /dev/null
+++ b/components/icon/demo/twotone.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+ zh-CN: 多色图标
+ en-US: Two-tone icon and colorful icon
+---
+
+## zh-CN
+
+可以通过设置 `theme` 属性为 `twotone` 来渲染双色图标，并且可以设置主题色。
+
+## en-US
+
+Specify property `theme` to `twotone` to render two-tone icons. You can also set the primary color.
diff --git a/components/icon/demo/twotone.ts b/components/icon/demo/twotone.ts
new file mode 100644
index 00000000000..964074203fb
--- /dev/null
+++ b/components/icon/demo/twotone.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-icon-twotone',
+ template: `
+
+
+
+
+
+ `,
+ styles : [ `
+ .icons-list > .anticon {
+ margin-right: 6px;
+ font-size: 24px;
+ }
+ ` ]
+})
+export class NzDemoIconTwotoneComponent {
+}
diff --git a/components/icon/doc/index.en-US.md b/components/icon/doc/index.en-US.md
index 400d224dfa1..02ce2b6cfc7 100755
--- a/components/icon/doc/index.en-US.md
+++ b/components/icon/doc/index.en-US.md
@@ -2,50 +2,143 @@
category: Components
type: General
title: Icon
-toc: false
+hasPageDemo: true
---
Semantic vector graphics.
-## Icons naming convention
+## List of icons
+
+> Click the icon and copy the code.
+
+We are still adding two-tone icons right now, syncing to [antd](https://ant.design/components/icon-cn/#components-icon-demo-iconfont).
+
+## API
+
+### [nz-icon]
+
+All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[type]` | Type of the ant design icon | string | - |
+| `[theme]` | Type of the ant design icon | `fill 丨 outline 丨 twotone` | `outline` |
+| `[spin]` | Rotate icon with animation | `boolean` | `false` |
+| `[twoToneColor]` |Only support the two-tone icon. Specific the primary color. | `string (hex color)` | - |
+| `[iconfont]` | Type of the icon from iconfont | string | - |
+
+### NzIconService
-We provide semantic name for every icon, and naming rules are as follows:
+| Methods | Description | Parameters |
+| -------- | ----------- | ---- |
+| `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` |
-- Scanning line icon has the similar name with its solid one，but it's distinguished by `-o`, for example, `question-circle` (a full circle) and `question-circle-o` (an empty circle);
-- Naming sequence：`[name]-[shape?]-[outline?]-[direction?]`.
+### SVG icons
-> `?` means is optional.
+After `1.7.0` version，we synced to Ant Design `3.9.x` and replaced font icons with svg icons which bring benefits below:
+- Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
+- Much more display accuracy in lower-level screens.
+- Support multiple colors for icon.
+- No need to change built-in icons with overriding styles by providing more props in component.
-## How To Use
+You can join in [this dicussion of Ant Design](https://github.com/ant-design/ant-design/issues/10353).
-Use tag `` to create an icon and set its type in the class prop, for example:
+NG-ZORRO hadn't provided an icon component. Instead, icon based on font files was provided. In `1.7.0`, we make this new directive compatible to old API. If you make no changes to your existing code, old icons would be dynamically loaded as `outline` icons. But the best pratice is always to use `nz-icon` directive and specify the `theme` prop.
```html
-
+
```
-## Local deployment
+All the icons will be rendered to `