CODEWITHSUNDEEP
reactjsmaterial-ui
LucSedirae
LucSedirae

Reputation: 157

MenuIcon not found in material-ui/icons

I am trying to create a basic navigation bar with Material UI. The boilerplate template on Material-UI's doc site https://material-ui.com/components/app-bar/ is returning the following error in the browser:

"Attempted import error: '@material-ui/icons' does not contain a default export (imported as 'MenuIcon')."

I have installed @material-ui/core and @material-ui/icons using npm. See package.json:

{
  "name": "profile_v4",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },

My Navbar.js component file:

import React from 'react'
import { AppBar, Toolbar, IconButton, Typography, Button } from '@material-ui/core';
import MenuIcon from "@material-ui/icons";

const Navbar = () => {
    return (
        <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    )
}

export default Navbar;

I have looked elsewhere on SO for a solve but all answers are a variation on "You have not installed npm material-ui/icons package" so I was hoping someone could tell me what I'm missing. Thanks in advance!

Upvotes: 1

Views: 17312

Answers (2)

Raymond Huff
Raymond Huff

Reputation: 21

In v5.10.10 this component is not installed with mui

npm install @mui/icons-material

Run an install for the icons-material will bring them into your node_modules/@mui folder.

You can repeat this process for other missing components you are trying to use.

Upvotes: 2

Mark Skelton
Mark Skelton

Reputation: 3891

The problem is with how you are importing the icon. You can fix it by either changing to a named import or provide the full path to the icon.

import MenuIcon from "@material-ui/icons/Menu";
import { Menu as MenuIcon } from "@material-ui/icons";

Upvotes: 13

Related Questions