@material-ui/icons

What is @material-ui/icons?

The @material-ui/icons package provides a large set of icons designed by Google for use in web projects. These icons are part of the Material-UI ecosystem and are used to enhance the visual aesthetics and user experience of an application. They are available as React components and can be easily integrated into React applications.

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

Using Material Icons as React Components

This feature allows developers to import individual icons as React components and use them directly in their JSX code. The example shows how to import the AccessAlarm icon and render it in a React component.

import React from 'react';
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

function MyApp() {
  return (
    <div>
      <AccessAlarmIcon />
    </div>
  );
}

export default MyApp;

Customizing Icon Styles

Icons can be styled using inline styles or CSS classes. The example demonstrates how to change the size and color of an icon using inline styles.

import React from 'react';
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

function MyApp() {
  return (
    <div>
      <AccessAlarmIcon style={{ fontSize: 40, color: 'blue' }} />
    </div>
  );
}

export default MyApp;

Combining Icons with Material-UI Components

Icons can be combined with other Material-UI components such as buttons, navigation elements, and form controls. The example shows how to use an icon within a Material-UI IconButton component.

import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';

function MyApp() {
  return (
    <IconButton aria-label='alarm'>
      <AccessAlarmIcon />
    </IconButton>
  );
}

export default MyApp;

Other packages similar to @material-ui/icons

react-icons

React-icons is a popular icon library that includes icons from various icon sets like Font Awesome, Ionicons, and Material Design. It provides similar functionality to @material-ui/icons but with a wider range of icon sets to choose from.

font-awesome

Font Awesome is a comprehensive icon library that can be used in web projects. It offers a large set of icons, but unlike @material-ui/icons, it is not specifically designed for React and does not provide icons as React components out of the box.

mdi-react

MDI-React is a wrapper for Material Design Icons that allows them to be used as React components. It is similar to @material-ui/icons but is focused solely on Material Design Icons, whereas @material-ui/icons is part of the broader Material-UI framework.

README

@material-ui/icons

This package provides the Google Material icons packaged as a set of React components.

Installation

Install the package in your project directory with:

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

These components use the Material-UI SvgIcon component to render the SVG path for each icon, and so a have a peer-dependency on the next release of Material-UI.

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

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Documentation

• The documentation
• The icons search