Socket
Socket
Sign inDemoInstall

@mui/icons-material

Package Overview
Dependencies
87
Maintainers
10
Versions
71
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/icons-material

Material Design icons distributed as SVG React components.


Version published
Maintainers
10
Weekly downloads
2,609,185
decreased by-10.88%

Weekly downloads

Package description

What is @mui/icons-material?

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.

What are @mui/icons-material's main functionalities?

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>
  );
}

Other packages similar to @mui/icons-material

Readme

Source

@mui/icons-material

This package provides the Google Material Icons converted to SvgIcon components.

Installation

Install the package in your project directory with:

npm install @mui/icons-material

These components use the Material UI's SvgIcon component to render the SVG path for each icon.

If you are not already using Material UI in your project, you can add it with:

npm install @mui/material

Documentation

Contributing

This icon set is meant to be in sync with Google's Material Icons. Therefore, we don't accept fixes, additions, or any other contributions that would make this package diverge from the source.

To synchronize with Material Icons, do the following:

  1. Inside this workspace run pnpm src:download
  2. Inside this workspace run pnpm src:icons
  3. Inside the root run pnpm docs:mdicons:synonyms
  4. If the number of icons changes significantly, edit the icons/icons.md and material-icons/material-icons.md under docs/data/material/components and update the numbers.

Keywords

FAQs

Last updated on 19 Mar 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc