Importation manquante de l'icône de recherche Material-UI

Question

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

Export 'search' (importé en tant que 'search') introuvable dans '@material-ui/icons/Search' (export possible : __esModule, par défaut)

Export 'search' (importé en tant que 'search') introuvable dans '@material-ui/icons/Search' (export possible : __esModule, par défaut)

L'icône de recherche n'est pas importée, mais j'ai installé le package matériel, mais elle n'est pas affichée dans package.json

Answer 1

Si vous regardez attentivement votre déclaration d'importation

Erreur : /!

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

Vous importez un module nommé "Recherche", qui possède déjà un export par défaut.
Afin d'utiliser l'exportation par défaut, vous devez utiliser

Travail :

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

Si vous souhaitez importer plusieurs icônes, vous devez utiliser le routage /icons,
Utilisez ensuite toutes les icônes que vous souhaitez, voici comment y parvenir :

Travail :

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

Installer et exécuter :

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

Answer 2

L'importation correcte est :

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

Vous devez l'installer si ce n'est pas déjà fait

npm i @mui/icons-material

Vous pouvez trouver toutes les icônes ici : https://mui.com/material-ui/material-icons/