How to use Material UI icons in React?

Question

I'm new to react and am working on an existing React component. I need to include an icon and noticed that some were already being brought in, like:

import KeyboardArrowLeftIcon from 'material-ui/svg-icons/action/keyboard-arrow-left';

I couldn't locate the folder (material-ui/svg-icons/action/), but tried to add a new icon:

import KeyboardArrowRightIcon from 'material-ui/svg-icons/action/keyboard-arrow-right';

However, this generates an error on compiling.

Would anyone know how I could add a new icon? Or, why there is no apparent director for these icons?

Answer 1

1. install material icon: npm install @material-ui/core @material-ui/icons

2. import the icon you will use: import MenuIcon from '@material-ui/icons/Menu';

3. use the icon: <MenuIcon/>

You can also use https://material-ui.com/components/material-icons/ to search for the icon you need.