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

Question

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?

It seems like you are confused using Material-ui v5 and v4. You installed v4 icons and tried to import v5 icons. — hotcakedev, Oct 25 '21 at 13:43

score 31 · Accepted Answer · edited May 19 '23 at 00:13

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 Material UI v5 already, it means you're missing the icon package. Follow the installation guide here to install:

npm install @mui/icons-material

score 7 · Answer 2 · edited Sep 16 '22 at 06:24

7

npm install @mui/icons-material

(OR)

npm install -g @material-ui/icons

edited Sep 16 '22 at 06:24

jasie

2,192
10
39
54

answered Sep 12 '22 at 04:52

Faisal Imran

71
1
2

3

you should be giving some details on the difference between the 2 npm install options you have provided – Saravanan Sep 18 '22 at 10:44

score 6 · Answer 3 · answered Oct 25 '21 at 14:05

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>

Rozza Haraa · Answer 4 · 2022-03-07T14:15:23.003

5

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

edited Mar 07 '22 at 14:15

answered Mar 02 '22 at 16:28

Rozza Haraa

49
1
3

score 0 · Answer 5 · answered Jul 18 '23 at 09:11

0

You need to install - @mui but you've installed material-ui.

But I'm facing issue if you can help then do check below two links.

I've forced installed mui.
As a result getting module not found error

answered Jul 18 '23 at 09:11

navalega0109

47
4

DINA TAKLIT · Answer 6 · 2023-08-07T11:07:17.967

Before proceeding, ensure that you have installed @material-ui/icons by running the following command npm install @mui/icons-material for material ui version 5 and npm install @material-ui/icons for version 4:

If you are utilizing React Material UI version 5, import the required icon like this:

import FileDownloadIcon from '@mui/icons-material/FileDownload';

If you encounter the Can't resolve issue while using React Material UI version 4 and you have imported it using the first method, follow these steps to resolve the problem:

Instead of importing the icon as:

import FileDownloadIcon from '@mui/icons-material/FileDownload';

You should import it like this:

import CheckCircleIcon from "@material-ui/icons/FileDownload";

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

6 Answers6

Linked

Related