Question 169037 in Javascript Question posted in
A very good W3school tutorial can be found here.

Is there an issue importing material-ui search icons in Javascript?

import React from 'react'
import {Search} from "@material-ui/icons/Search"
const App = () => {
  return (
    <div>
    <Search/>
    </div>
  )
}
export default App

export ‘Search’ (imported as ‘Search’) was not found in ‘@material-ui/icons/Search’ (possible exports: __esModule, default)

export ‘Search’ (imported as ‘Search’) was not found in ‘@material-ui/icons/Search’ (possible exports: __esModule, default)

search icons is not imported,but i installed material packages and it is not showing in package.json

Tags:

2

Answers


  1. 0

    The correct import is:

    import SearchIcon from '@mui/icons-material/Search';

    If you haven’t already, you’ll have to install

    npm i @mui/icons-material

    You can find all of the icons here: https://mui.com/material-ui/material-icons/

    Login or Signup to reply.
  2. 0

    if you look closely at your import statement

    Wrong: /!

    import { Search } from "@material-ui/icons/Search

    you are importing a module named Search, which already has a default export.
    In order to use the default export you should use

    Working:

    import Search from "@material-ui/icons/Search

    If you want to import multiple icons you should use the route /icons,
    Then consume all the icons that you want here is how you can achieve that:

    Working:

    import { Search, Mail } from "@material-ui/icons

    To install run:

    npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search