SvgIcon API
API documentation for the React SvgIcon component. Learn about the available props, and the CSS API.
Import
import SvgIcon from '@material-ui/core/SvgIcon';
// o
import { SvgIcon } from '@material-ui/core';
Component name
The nameMuiSvgIcon
can be used when providing default props or style overrides in the theme.Props
Nombre | Tipo | Por defecto | Descripción |
---|---|---|---|
children | node | Node passed into the SVG element. | |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
color | 'action' | 'disabled' | 'error' | 'inherit' | 'primary' | 'secondary' | string | 'inherit' | The color of the component. It supports those theme colors that make sense for this component. You can use the htmlColor prop to apply a color attribute to the SVG element. |
component | elementType | 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. |
htmlColor | string | Applies a color attribute to the SVG element. | |
shapeRendering | string | The shape-rendering attribute. The behavior of the different options is described on the MDN Web Docs. If you are having issues with blurry icons you should investigate this prop. | |
sx | object | ||
titleAccess | string | Provides a human-readable title for the element that contains it. https://www.w3.org/TR/SVG-access/#Equivalent | |
viewBox | string | '0 0 24 24' | Allows you to redefine what the coordinates without units mean inside an SVG element. For example, if the SVG element is 500 (width) by 200 (height), and you pass viewBox="0 0 50 20", this means that the coordinates inside the SVG will go from the top left corner (0,0) to bottom right (50,20) and each unit will be worth 10px. |
The
ref
is forwarded to the root element.Any other props supplied will be provided to the root element (native element).
CSS
Rule name | Global class | Descripción |
---|---|---|
root | .MuiSvgIcon-root | Styles applied to the root element. |
colorPrimary | .MuiSvgIcon-colorPrimary | Styles applied to the root element if color="primary" . |
colorSecondary | .MuiSvgIcon-colorSecondary | Styles applied to the root element if color="secondary" . |
colorAction | .MuiSvgIcon-colorAction | Styles applied to the root element if color="action" . |
colorError | .MuiSvgIcon-colorError | Styles applied to the root element if color="error" . |
colorDisabled | .MuiSvgIcon-colorDisabled | Styles applied to the root element if color="disabled" . |
fontSizeInherit | .MuiSvgIcon-fontSizeInherit | Styles applied to the root element if fontSize="inherit" . |
fontSizeSmall | .MuiSvgIcon-fontSizeSmall | Styles applied to the root element if fontSize="small" . |
fontSizeLarge | .MuiSvgIcon-fontSizeLarge | Styles applied to the root element if fontSize="large" . |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.