How to use Material UI icons in React?

it is also possible to import them via CDN by calling the links in index.html from the public folder.

simply copy&paste the links below in head.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

  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.


import EditIcon from '@material-ui/icons/Edit';

<EditIcon />

material-ui


There's a material-icons-react lib that makes using the icons easy.

https://www.npmjs.com/package/material-icons-react

Here's a quick icon reference. https://material.io/resources/icons/?icon=nature_people&style=baseline

Tags:

Reactjs