005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
53 lines
1.7 KiB
Markdown
53 lines
1.7 KiB
Markdown
---
|
|
productId: material-ui
|
|
components: Icon, SvgIcon
|
|
materialDesign: https://m2.material.io/design/iconography/system-icons.html
|
|
packageName: '@mui/icons-material'
|
|
githubLabel: 'package: icons'
|
|
---
|
|
|
|
# Material Icons
|
|
|
|
<p class="description">2,100+ ready-to-use React Material Icons from the official website.</p>
|
|
|
|
{{"component": "@mui/docs/ComponentLinkHeader"}}
|
|
<br/>
|
|
|
|
[@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material)
|
|
includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](/material-ui/api/svg-icon/) components.
|
|
It depends on `@mui/material`, which requires Emotion packages.
|
|
Use one of the following commands to install it:
|
|
|
|
<!-- #npm-tag-reference -->
|
|
|
|
<codeblock storageKey="package-manager">
|
|
|
|
```bash npm
|
|
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
|
|
```
|
|
|
|
```bash pnpm
|
|
pnpm add @mui/icons-material @mui/material @emotion/styled @emotion/react
|
|
```
|
|
|
|
```bash yarn
|
|
yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react
|
|
```
|
|
|
|
</codeblock>
|
|
|
|
See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
|
|
|
|
:::info
|
|
Google offers [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) as the successor to Material Icons. However, `@mui/icons-material` currently supports only Icons, with no support for Symbols yet.
|
|
:::
|
|
|
|
<hr/>
|
|
|
|
## Search Material Icons
|
|
|
|
Browse through the icons below to find the one you need.
|
|
The search field supports synonyms—for example, try searching for "hamburger" or "logout."
|
|
|
|
{{"demo": "SearchIcons.js", "hideToolbar": true, "bg": true}}
|