找不到模块：无法解析“@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?

Answer 1

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

Answer 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:

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

Answer 3

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>

Answer 4

npm install @mui/icons-material (OR) npm install -g @material-ui/icons

Answer 5

only if you'll use @mui/icons-material

npm install @mui/icons-material --force