2016-03-31 09:40:55 +08:00
---
order: 1
2016-04-22 14:52:19 +08:00
title:
zh-CN: 图标按钮
en-US: Icon
2016-03-31 09:40:55 +08:00
---
2015-06-05 20:26:41 +08:00
2016-04-22 14:52:19 +08:00
## zh-CN
2016-04-25 11:04:56 +08:00
当需要在 `Button` 内嵌入 `Icon` 时,可以设置 `icon` 属性,或者直接在 `Button` 内使用 `Icon` 组件。
如果想控制 `Icon` 具体的位置,只能直接使用 `Icon` 组件,而非 `icon` 属性。
2015-06-25 17:39:24 +08:00
2016-04-22 14:52:19 +08:00
## en-US
2019-08-13 15:56:29 +08:00
`Button` components can contain an `Icon` . This is done by setting the `icon` property or placing an `Icon` component within the `Button` .
2016-04-25 11:04:56 +08:00
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.
2016-04-22 14:52:19 +08:00
2022-05-19 09:46:26 +08:00
```tsx
2019-11-28 12:34:33 +08:00
import { SearchOutlined } from '@ant-design/icons';
2022-05-21 22:14:15 +08:00
import { Button, Tooltip } from 'antd';
import React from 'react';
2015-09-27 16:30:35 +08:00
2022-05-19 09:46:26 +08:00
const App: React.FC = () => (
2020-06-11 15:24:24 +08:00
< >
2019-11-20 17:49:09 +08:00
< Tooltip title = "search" >
2019-11-29 14:27:47 +08:00
< Button type = "primary" shape = "circle" icon = {<SearchOutlined / > } />
2019-11-20 17:49:09 +08:00
< / Tooltip >
2019-08-28 11:48:34 +08:00
< Button type = "primary" shape = "circle" >
A
< / Button >
2019-11-28 12:34:33 +08:00
< Button type = "primary" icon = {<SearchOutlined / > }>
2019-05-07 14:57:32 +08:00
Search
< / Button >
2019-11-20 17:49:09 +08:00
< Tooltip title = "search" >
2019-11-29 14:27:47 +08:00
< Button shape = "circle" icon = {<SearchOutlined / > } />
2019-11-20 17:49:09 +08:00
< / Tooltip >
2019-11-28 12:34:33 +08:00
< Button icon = {<SearchOutlined / > }>Search< / Button >
2016-04-22 14:52:19 +08:00
< br / >
2019-11-20 17:49:09 +08:00
< Tooltip title = "search" >
2019-11-29 14:27:47 +08:00
< Button shape = "circle" icon = {<SearchOutlined / > } />
2019-11-20 17:49:09 +08:00
< / Tooltip >
2019-11-28 12:34:33 +08:00
< Button icon = {<SearchOutlined / > }>Search< / Button >
2019-11-20 17:49:09 +08:00
< Tooltip title = "search" >
2019-11-29 14:27:47 +08:00
< Button type = "dashed" shape = "circle" icon = {<SearchOutlined / > } />
2019-11-20 17:49:09 +08:00
< / Tooltip >
2019-11-28 12:34:33 +08:00
< Button type = "dashed" icon = {<SearchOutlined / > }>
2019-05-07 14:57:32 +08:00
Search
< / Button >
2021-10-02 12:35:50 +08:00
< Button icon = {<SearchOutlined / > } href="https://www.google.com" />
2021-08-11 12:59:14 +08:00
< br / >
< br / >
< Tooltip title = "search" >
< Button type = "primary" shape = "circle" icon = {<SearchOutlined / > } size="large" />
< / Tooltip >
< Button type = "primary" shape = "circle" size = "large" >
A
< / Button >
< Button type = "primary" icon = {<SearchOutlined / > } size="large">
Search
< / Button >
< Tooltip title = "search" >
< Button shape = "circle" icon = {<SearchOutlined / > } size="large" />
< / Tooltip >
< Button icon = {<SearchOutlined / > } size="large">
Search
< / Button >
< br / >
< Tooltip title = "search" >
< Button shape = "circle" icon = {<SearchOutlined / > } size="large" />
< / Tooltip >
< Button icon = {<SearchOutlined / > } size="large">
Search
< / Button >
< Tooltip title = "search" >
< Button type = "dashed" shape = "circle" icon = {<SearchOutlined / > } size="large" />
< / Tooltip >
< Button type = "dashed" icon = {<SearchOutlined / > } size="large">
Search
< / Button >
2021-10-02 12:35:50 +08:00
< Button icon = {<SearchOutlined / > } size="large" href="https://www.google.com" />
2022-04-03 23:27:45 +08:00
< />
2016-04-22 14:52:19 +08:00
);
2022-05-19 09:46:26 +08:00
export default App;
2019-05-07 14:57:32 +08:00
```