[This is the error shown whenever I try to use @material-ui/core and icons
`import React from "react";
import "./Sidebar.CSS";
import SearchIcon from "@material-ui/icons/Search";
const Sidebar = () => {
return (
<>
<div className="sidebar">
<div className="sidebar__header">
<SearchIcon />
</div>
<div className="sidebar__search"></div>
<div className="sidebar__chats"></div>
</div>
</>
);
};
export default Sidebar;`]1
are you sure you have run
// with npm
npm install @material-ui/icons
// with yarn
yarn add @material-ui/icons
Because if you haven't then react won't know where to look for the icons
This could be happening because of the following reasons.
Material UI is not installed properly. Delete the material UI package from node modules folder.Add material UI package under dependencies (not under devDependencies) and delete package-lock.json and try non install again
SearchIcon will be a named export
Use import { SearchIcon } from "@material-ui/icons/Search";
Have you maybe not done the following?
// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core
And then also:
// with npm
npm install @material-ui/icons
// with yarn
yarn add @material-ui/icons
If you are taking it from this website (https://material-ui.com/components/material-icons/) then you need to install the core as well. As explained here (https://material-ui.com/getting-started/installation/)