React - Material UI

About

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.

Articles Related

Installation

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

Create

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

Svg Path

Inline code (find one at https://materialdesignicons.com/)

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

Svg file

Svg File (find one at https://materialdesignicons.com/)

Ref Doc -
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

Search at: https://material-ui.com/components/material-icons/
Import

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

Use

<FindReplaceIcon/>

Properties

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

Color

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

Size

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

Semantic

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">
  <SvgIcon>
    <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
  </SvgIcon>
</IconButton>

React - Material UI - Icon