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'"

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>
  );
}

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

Answer 2

npm install @mui/icons-material

(OR)

npm install -g @material-ui/icons