Reputation: 113
I am trying to use Material ui icons, but the moment i add the icon component it gives error.
Here is the codesandbox https://codesandbox.io/s/nostalgic-benz-0uxyf?file=/src/App.js
Upvotes: 0
Views: 691
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
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
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