I have installed both @material-ui/core and @material-ui/icons.
I am trying to import "FileDownloadIcon" from Material icons.
Installing "@material-ui/core":
npm i @material-ui/core
Installing "@material-ui/icons":
npm i @material-ui/icons
This is the way I am trying to import "FileDownloadIcon":
import FileDownloadIcon from '@mui/icons-material/FileDownload';
<div className="download-file">
<Button
variant="contained"
color="primary"
onClick={() => getResume()}
>
<FileDownloadIcon />
Download Resume
</Button>
</div>
But it's occurring error like this "Module not found: Can't resolve '@mui/icons-material/FileDownload' in 'E:\frontend\src\component\Details'"
Can anyone tell me where is the problem?
FileDownload icon is added in v5, it does not exist in v4. You can search for v4 icons here. To use the v5 icon in the older version of MUI, just go and copy the source code here:
function FileDownload(props) {
return (
<SvgIcon {...props}>
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
</SvgIcon>
);
}
EDIT: If you are using MUI v5 already, it means you're missing the icon package. Follow the installation guide here to install:
npm install @mui/icons-material
You seem to be using v5 of Material-UI. Use the following:
import { FileDownload } from "@mui/icons-material";
Notice the name of the icon, omitting Icon. Then use it with the button:
<div className="download-file">
<Button
variant="contained"
color="primary"
onClick={() => getResume()}
startIcon={<FileDownload />}>
Download Resume
</Button>
</div>
use the migration from v4 to v5 following this link https://mui.com/guides/migration-v4/
you can do:
// with npm npm install @mui/icons-material
or this :