ant-design/components/button/demo/icon.md
vagusX 149729e524
use ant design icons 4.0 (#18217)
* feat: use @ant-design/icons@4.0

* feat: use createFromIconfontCN to make site works

* feat: update doc for Icon

* feat: use icon in component Alert

* feat: use icon in component Avatar

* feat: use icon in component Breadcrumb

* feat: use icon in component Button

* feat: use icon in component Cascader

* feat: use icon in component Collapse

* feat: use icon in component Datepicker

* feat: use icon in component Dropdown

* feat: use icon in component Form

* feat: use icon in component Input

* feat: use icon in component InputNumber

* feat: use icon in component Layout

* feat: use icon in component Mention

* feat: use icon in component Message

* feat: use icon in component Modal

* feat: use icon in component Notification

* feat: use icon in component PageHeader

* feat: use icon in component Pagination

* feat: use icon in component Popconfirm

* feat: use icon in component Progress

* feat: use icon in component Rate

* feat: use icon in component Result

* feat: use icon in component Select

* feat: use icon in component Step

* feat: use icon in component Switch

* feat: use icon in component Table

* feat: use icon in component Tab

* feat: use icon in component Tag

* feat: handle rest component which using Icon

* fix: remove unused vars

* feat: use latest alpha ant design icons

* fix: failed test in uploadlist.test.js

* test: update snapshot for icons

* doc: add Icon for site

* doc: use @ant-design/icons in site

* chore: use latest icons

* fix: tslint issue

* fix: test cases

* fix: types for react

* fix: lint rules for import orders

* fix: use @ant-design/icons@4.0.0-alpha.5 to avoid insert css in server render

* fix: eslint error in demo/**.md

* inject antd icons

* update snapshot

* fix site

* doc: update docs

* fix: code snippets icon in site

* feat: use latest @ant-design/icons

* fix: icon props in message
2019-08-13 14:07:17 +08:00

1.3 KiB

order title
1
zh-CN en-US
图标按钮 Icon

zh-CN

当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件。

如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。

en-US

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button

If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.

import { Button } from 'antd';
import { Search as IconSearch } from '@ant-design/icons';

ReactDOM.render(
  <div>
    <Button type="primary" shape="circle" icon={<IconSearch />} />
    <Button type="primary" icon={<IconSearch />}>
      Search
    </Button>
    <Button shape="circle" icon={<IconSearch />} />
    <Button icon={<IconSearch />}>Search</Button>
    <br />
    <Button shape="circle" icon={<IconSearch />} />
    <Button icon={<IconSearch />}>Search</Button>
    <Button type="dashed" shape="circle" icon={<IconSearch />} />
    <Button type="dashed" icon={<IconSearch />}>
      Search
    </Button>
  </div>,
  mountNode,
);