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
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:
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>
npm install @mui/icons-material (OR) npm install -g @material-ui/icons
only if you'll use @mui/icons-material
npm install @mui/icons-material --force
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.