跳转到内容
编辑此页面

Icon API

想要学习更多组件属性和 CSS API，可以查阅 React Icon 组件的 API 文档。

导入

import Icon from '@mui/material/Icon';
// 或
import { Icon } from '@mui/material';
您可以通过 阅读本指南以最小化捆包大小 来了解这种差异。

组件名称

The name MuiIcon can be used when providing default props or style overrides in the theme.

属性

原生（Native） 组件的属性也是可用的。

名称类型默认值描述
baseClassNamestring'material-icons'
为Icon添加基类名。 默认值为 'material-icons'但可以更改为更适合你的其他名称 (比如：material-icons-rounded, fas, 等等)。
childrennode
Icon子节点名
classesobject
Override or extend the styles applied to the component. See CSS API below for more details.
color'inherit'
| 'action'
| 'disabled'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'inherit'
The color of the component. It supports those theme colors that make sense for this component.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
fontSize'inherit'
| 'large'
| 'medium'
| 'small'
| string		'medium'
图标的大小。默认为 24px，但可设置为继承字体大小。
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

ref 则会被传递到根元素中。

CSS

规则名称全局类名描述
root.MuiIcon-rootStyles applied to the root element.
colorPrimary.MuiIcon-colorPrimaryStyles applied to the root element if color="primary".
colorSecondary.MuiIcon-colorSecondaryStyles applied to the root element if color="secondary".
colorAction.MuiIcon-colorActionStyles applied to the root element if color="action".
colorError.MuiIcon-colorErrorStyles applied to the root element if color="error".
colorDisabled.MuiIcon-colorDisabledStyles applied to the root element if color="disabled".
fontSizeInherit.MuiIcon-fontSizeInheritStyles applied to the root element if fontSize="inherit".
fontSizeSmall.MuiIcon-fontSizeSmallStyles applied to the root element if fontSize="small".
fontSizeLarge.MuiIcon-fontSizeLargeStyles applied to the root element if fontSize="large".

您可以使用组件自定义选项对组件进行个性化：

演示项目