Pular para o conteúdo
Ajude a traduzir esta página

Icon API

Documentação da API para o componente React Icon . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Icon from '@mui/material/Icon';
// ou
import { Icon } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

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

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
baseClassNamestring'material-icons'
The base class applied to the icon. Defaults to 'material-icons', but can be changed to any other base class that suits the icon font you're using (e.g. material-icons-rounded, fas, etc).
childrennode
The name of the icon font ligature.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'inherit'
| 'action'
| 'disabled'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'inherit'
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
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'
The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiIcon-rootEstilos aplicados ao elemento raiz.
colorPrimary.MuiIcon-colorPrimaryEstilos aplicados para o elemento raiz se color="primary".
colorSecondary.MuiIcon-colorSecondaryEstilos aplicados para o elemento raiz se color="secondary".
colorAction.MuiIcon-colorActionEstilos aplicados para o elemento raiz se color="action".
colorError.MuiIcon-colorErrorEstilos aplicados para o elemento raiz se color="error".
colorDisabled.MuiIcon-colorDisabledEstilos aplicados para o elemento raiz se color="disabled".
fontSizeInherit.MuiIcon-fontSizeInheritEstilos aplicados para o elemento raiz se fontSize="inherit".
fontSizeSmall.MuiIcon-fontSizeSmallEstilos aplicados para o elemento raiz se fontSize="small".
fontSizeLarge.MuiIcon-fontSizeLargeEstilos aplicados para o elemento raiz se fontSize="large".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações