| components |
|---|
Icon, SvgIcon |
Material icons use geometric shapes to visually represent core ideas, capabilities, or topics.
A system icon or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save, and are commonly found in app bars, toolbars, buttons, and lists. Google has provided a set of Material icons that follow these guidelines.
Material-UI provides two components to render system icons: Icon for rendering font icons, and SvgIcon for rendering SVG paths.
The Icon component will display an icon from any icon font that supports ligatures.
As a prerequisite, you must include one, such as the
Material icon font in your project.
Icon will set the correct class name for the Material icon font. For other fonts, you must supply the
class name using the Icon component's className property.
To use an icon simply wrap the icon name (font ligature) with the Icon component,
for example <Icon>star</Icon>.
By default, an Icon will inherit the current text color.
Optionally, you can set the icon color using one of the theme color properties: accent, action, contrast, disabled, error, & primary.
{{demo='pages/style/Icons.js'}}
The SvgIcon component takes an SVG path element as its child and converts it to a React component that displays the path,
and allows the icon to be styled and respond to mouse events.
The resulting icon can be used as is, or included as a child for other Material-UI components that use icons.
{{demo='pages/style/SvgIcons.js'}}
Looking for SVG icons? There are a lot of projects out there. We have found one that provides 2,000+ unofficial Material Design Icons: https://materialdesignicons.com/.
It's interesting to have the building blocks needed to implement custom icons, but what about presets?
We provide a separate NPM package,
material-ui-icons,
that includes the 900+ official material system icons: material.io/icons converted to SvgIcon components.
Let's say you are looking for a specific icon.
You can take advantage of the search bar of material.io/icons to find it.
Keep in mind that we PascalCase the names of the icons, for instance:
{{demo='pages/style/SvgMaterialIcons.js'}}