CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Pratyaksh Saini
Pratyaksh Saini

Reputation: 113

Unable to use Material UI Icons

I am trying to use Material ui icons, but the moment i add the icon component it gives error. enter image description here

Here is the codesandbox https://codesandbox.io/s/nostalgic-benz-0uxyf?file=/src/App.js

Upvotes: 0

Views: 691

Answers (3)

dlev
dlev

Reputation: 26

Try to replace ur import:

const { HighlightIcon } = require("@material-ui/icons");

with provided example in documentation (https://material-ui.com/components/material-icons/):

import HighlightIcon from '@material-ui/icons/Highlight';

Here fixed version of ur sandbox: https://codesandbox.io/s/interesting-snyder-dnyy8?file=/src/App.js

Upvotes: 1

GMKHussain
GMKHussain

Reputation: 4701

Are you using something like this ?

#1

import { HomeIcon } from '@material-ui/icons';
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />

#2

import Icon from '@material-ui/core/Icon';

<Icon>home</Icon>

Upvotes: 0

Tim Gerhard
Tim Gerhard

Reputation: 3607

Quick and easy, there is no icon called "HighlightIcon". You can check the available Icons here: https://material-ui.com/components/material-icons/

You can take the hint from here: "You likely forgot to export your component from the file it's defined in". Basically since you imported the icon like this:

const { HighlightIcon } = require("@material-ui/icons");

react looks in @material-ui/icons for a class or function with the name HighlightIcon. But as I stated above, there isn't one.

If you change your import to this:

const { Highlight } = require("@material-ui/icons");

You would import an existing icon (called Highlight).

Upvotes: 0

Related Questions