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';
// or
import { SvgIcon } from '@material-ui/core';Component name
The nameMuiSvgIcon can be used when providing default props or style overrides in the theme.Props
| Name | Type | Default | Description |
|---|---|---|---|
| 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' | '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' | '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 | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| 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 | Description |
|---|---|---|
| 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
styleOverridesproperty in a custom theme.