diff --git a/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap
new file mode 100644
index 000000000000..108c38519edf
--- /dev/null
+++ b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -0,0 +1,562 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/icon/demo/basic.md extend context correctly 1`] = `
+
+`;
+
+exports[`renders ./components/icon/demo/custom.md extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/icon/demo/iconfont.md extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/icon/demo/scriptUrl.md extend context correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/icon/demo/two-tone.md extend context correctly 1`] = `
+
+`;
diff --git a/components/icon/__tests__/__snapshots__/demo.test.ts.snap b/components/icon/__tests__/__snapshots__/demo.test.ts.snap
new file mode 100644
index 000000000000..210f74757994
--- /dev/null
+++ b/components/icon/__tests__/__snapshots__/demo.test.ts.snap
@@ -0,0 +1,562 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/icon/demo/basic.md correctly 1`] = `
+
+`;
+
+exports[`renders ./components/icon/demo/custom.md correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/icon/demo/iconfont.md correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/icon/demo/scriptUrl.md correctly 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`renders ./components/icon/demo/two-tone.md correctly 1`] = `
+
+`;
diff --git a/components/icon/__tests__/demo-extend.test.ts b/components/icon/__tests__/demo-extend.test.ts
new file mode 100644
index 000000000000..0b8861616de7
--- /dev/null
+++ b/components/icon/__tests__/demo-extend.test.ts
@@ -0,0 +1,3 @@
+import { extendTest } from '../../../tests/shared/demoTest';
+
+extendTest('icon');
diff --git a/components/icon/__tests__/demo.test.ts b/components/icon/__tests__/demo.test.ts
new file mode 100644
index 000000000000..1a1dbb7efd21
--- /dev/null
+++ b/components/icon/__tests__/demo.test.ts
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('icon');
diff --git a/components/icon/demo/basic.md b/components/icon/demo/basic.md
index 2b3879038cc8..02557876b400 100644
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@@ -14,6 +14,7 @@ title:
Import icons from `@ant-design/icons`, component name of icons with different theme is the icon name suffixed by the theme name. Specify the `spin` property to show spinning animation.
```jsx
+import { Space } from 'antd';
import {
HomeOutlined,
SettingFilled,
@@ -23,25 +24,14 @@ import {
} from '@ant-design/icons';
ReactDOM.render(
-
+
-
,
+ ,
mountNode,
);
```
-
-
diff --git a/components/icon/demo/custom.md b/components/icon/demo/custom.md
index 054ee0776306..27a46a161d64 100644
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@@ -14,7 +14,8 @@ title:
Create a reusable React component by using ``. The property `component` takes a React component that renders to `svg` element.
```jsx
-import Icon from '@ant-design/icons';
+import { Space } from 'antd';
+import Icon, { HomeOutlined } from '@ant-design/icons';
const HeartSvg = () => (