@mui/icons-material
Advanced tools
The @mui/icons-material package provides a large set of icons created by the Material-UI team that are based on Google's Material Design. These icons can be easily integrated into React applications to enhance user interfaces with scalable and accessible pictographic assets.
Using Material Icons in React Components
This feature allows developers to import specific icons from the package and use them as React components within their application. The example shows how to import the AccessAlarm icon and render it in a component.
import React from 'react';
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
function MyApp() {
return (
<div>
<AccessAlarmIcon />
</div>
);
}Customizing Icon Size and Color
Icons can be customized in terms of size and color by passing inline styles or using the 'sx' prop. The code sample demonstrates how to change the size to 40 pixels and the color to blue.
import React from 'react';
import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
function MyApp() {
return (
<div>
<AccessAlarmIcon style={{ fontSize: 40, color: 'blue' }} />
</div>
);
}Combining Icons with Material-UI Components
Material icons can be combined with other Material-UI components such as buttons. In this example, a Delete icon is used within an IconButton component to create a clickable delete button.
import React from 'react';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
function MyApp() {
return (
<IconButton aria-label='delete'>
<DeleteIcon />
</IconButton>
);
}React-icons is a popular package that provides a large collection of icons from various icon libraries such as Font Awesome, Ionicons, and Material Design icons. It allows for easy integration and customization of icons in React applications, similar to @mui/icons-material, but with a broader range of icon sets.
Font Awesome is a widely used icon set that can be integrated into web projects. It offers both free and pro versions with a large selection of icons. While it is not a React-specific package, it can be used in React applications through the 'react-fontawesome' wrapper. It differs from @mui/icons-material in that it is not specifically designed for Material Design.
MDI-React is a package that provides Material Design Icons for React. It is similar to @mui/icons-material in that it focuses on Material Design icons, but it is a separate project not affiliated with the Material-UI team. It offers a different set of icons and may have different customization options.
This package contains Google's Material Icons converted to Material UI SVG Icon components.
Google also offers Material Symbols as an alternative to Material Icons.
@mui/icons-materialonly covers Icons, and there are no plans to support Symbols at this time.
The Material Icons package depends on Material UI—install both with the following command:
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
The Icons package is updated via a script that reads through Google's Material Icons set and extracts the SVG elements from there. Because of this, we don't accept new icons that diverge from the source.
To update the @mui/icons-material package with the latest Material Icons set, run the following commands:
pnpm src:downloadpnpm src:iconspnpm docs:mdicons:synonymsThis process is performed by the maintainers on a quarterly basis.
v6.1.0
<!-- generated comparing v6.0.2..master -->Sep 10, 2024
A big thanks to the 21 contributors who made this release possible. Here are the highlights ✨:
@mui/icons-material (#43624). This change is backwards compatible with previously recommended setups. Bundlers that don't support the exports field won't be affected. If you discover any issues, please reach out by creating a GitHub issue.FAQs
Material Design icons distributed as SVG React components.
The npm package @mui/icons-material receives a total of 2,776,483 weekly downloads. As such, @mui/icons-material popularity was classified as popular.
We found that @mui/icons-material demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.