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

user_16948230 0
Viewed 53673

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?

material-ui reactjs javascript
4 Answers

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
user_94494260

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>
user_946290

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 :

  1. npm install @mui/material @mui/styles
  2. npm install @emotion/react @emotion/styled
user_173112870

npm install @mui/icons-material

(OR)

npm install -g @material-ui/icons

user_170171490
Related