CODEWITHSUNDEEP
reactjs
MeltingDog
MeltingDog

Reputation: 15490

How to use Material UI icons in React?

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?

Upvotes: 24

Views: 115879

Answers (9)

Awara Amini
Awara Amini

Reputation: 592

For clear button add this at the very top of your page:

import ClearIcon from "@mui/icons-material/Clear";

   <Button
         style={{
                position: "absolute" ,
                left: "0" ,
                top: "0" ,
                zIndex: "2"      
                }}
                type="button"
                variant="light"
                onClick={() => deleteFileHandler(x)}
                startIcon={<ClearIcon />}
          >

Upvotes: 0

Dinesh Nagarajan
Dinesh Nagarajan

Reputation: 1243

The following import worked for me.

import ReplayIcon from "@mui/icons-material/Replay";

Upvotes: 1

artborovik
artborovik

Reputation: 1

To do so, add one of the following command lines, depending on whether you do it with npm or yarn, into your project:

npm install @material-ui/core

yarn add @material-ui/core

A detailed step-by-step guide is available here.

Upvotes: -1

M Danil Rafiqi
M Danil Rafiqi

Reputation: 594

  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.

Upvotes: 46

Matt
Matt

Reputation: 1558

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

Upvotes: 2

Adewale Olaoye
Adewale Olaoye

Reputation: 101

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

<EditIcon />

material-ui

Upvotes: 2

LoLo
LoLo

Reputation: 374

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" />

Upvotes: 4

wolf354
wolf354

Reputation: 167

to import the icons from Material-UI into React.js you must use Pascal Case ( keyboard-arrow-right becomes KeyboardArrowRight ). About the path, I am using 'import ArrowBack from '@material-ui/icons/ArrowBack', you may not be using the "at" sign in material-ui (when installing), but you should check that the directory you are pointing to contains a lot of JS files with the Icon name in PascalCase ("AccessAlarm.js" is the first icon/file that shows up in my projects).

Upvotes: 0

Deepak Brahmania
Deepak Brahmania

Reputation: 66

Have you tried installing the dependencies first. Here is the link to Material Icons

Upvotes: 1

Related Questions