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

Question

I have installed both the packages already the icon and the core but still m getting this error, why??

import React from 'react'
import './Nav.css';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';

function Nav() {
    return ( 
        <div className = 'header' >
            <div className="header_left">
                <img className = 'header_image' src='https://cdn-icons-png.flaticon.com/512/174/174857.png' alt='' />
                <div className="header_search">
                    {/* Search icon */}
                    <SearchOutlinedIcon/>
                    <input type = 'text' placeholder='search' />
                </div>
            </div>
        </div>
    )
}

export default Nav

Answer 1

Lots of details missing in the question but here's my take on it:

I'm using npm v7.24.1 at the moment and I have the same dependency listed in package.json

"@mui/icons-material": "5.2.0"

And it worked fine when I used it in a component like this

import { SearchOutlined } from '@mui/icons-material';

Reflecting on the comment under your question, which I cannot reply to unfortunately, are you sure you are running npm install in the same directory your package.json is located in? Because unless your npm version is less than 5, npm install @mui/icons-material must affect package.json (and package-lock.json). Use --save flag with npm install command if the version of your npm is less than 5. Verify npm version with "npm -v".

Another thing you could do is check whether @mui/icons-material exists inside node_modules folder. If not, try adding @mui/icons-material to the dependencies section of package.json manually and then run npm install in the same directory.

Answer 2

Try to install also these packages.

// with npm

npm install @mui/material @emotion/react @emotion/styled

// with yarn

yarn add @mui/material @emotion/react @emotion/styled