'Module not found: Can't resolve '@mui/icons-material/FileDownload'

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?

Solution 1:^[1]

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>

Solution 2:^[2]

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 :

npm install @mui/material @mui/styles
npm install @emotion/react @emotion/styled

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	John P
Solution 2

'Module not found: Can't resolve '@mui/icons-material/FileDownload'

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]