React - Material UI - Icon


This page is about the svg icon functionality of material ui for react.

Just FYI
There is also possibility to pass icon via:

  • a font
  • or class (Example with awesome)
import Icon from '@material-ui/core/Icon';
<Icon className="fa fa-plus-circle" color="primary" />

but this method needs to embedded the whole library whereas with a svg, you get it inline in your page.


yarn add @material-ui/core
# timeout of 100 seconds (100 000 in ms). Ddefault of 30 seconds is not enough.
# and you get a `There appears to be trouble with your network connection`
yarn add @material-ui/icons --network-timeout 100000

Svg Icon


  • The SvgIcon component
  • Standardized Material Design icons exported as React components (SVG icons).

Svg Path

function HomeIcon(props) {
  return (
    <SvgIcon {...props}>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />

Svg file

Svg File (find one at

  • Example with webpack that use svgr (ie transform the svg in a react component)
  test: /\.svg$/,
  use: ['@svgr/webpack'],
  • and include it in the Page
import StarIcon from './star.svg';

<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />

Material Icons Library

import FindReplaceIcon from '@material-ui/icons/FindReplace';
  • Use


Because the component is a svg icon, everywhere the properties of a SvgIcon can be used: See properties


<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />


<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon style={{ fontSize: 40 }} />


Ref Doc

If the icons are not purely decorative, you can add a semantic with

  • titleAccess=“meaning”
<SearchIcon color="secondary" titleAccess="Search"/>
  • or the aria-label in the case of focusable interactive elements (like when used with an icon button)
import IconButton from '@material-ui/core/IconButton';
import SvgIcon from '@material-ui/core/SvgIcon';

// ...

<IconButton aria-label="delete">
    <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />

Documentation / Reference

Discover More
How to import Svg into React (Manually and with SvgR)?

This page shows you how you can show Svg in React. The problem is that Raw Svg are not natively React component and therefore cannot be added to the React tree directly. URL The Javascript world is...
React - FontAwesome (Icon)

Fontawesome is a library of icon (free and paid). This section is talking fontawesome integration into react. When reading the documentation, you will find prefix that references a style (ie a...
Card Puncher Data Processing
UI - Material UI

Material UI is a react library that implements material design CreateMuiTheme tool - react-theming/create-mui-theme via the Material...
Card Puncher Data Processing
What is an Icon?

This page is icons. They represent symbolic image. Unicode Block Miscellaneous_SymbolsMiscellaneous Symbols From 2600U+2600 to 26FFU+26FF See also: Icon font for special icon font. with the 260ETelephon...

Share this page:
Follow us:
Task Runner