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

Readme

Source

@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:

npm install @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:

npm install material-ui@next

Usage

The import path for each Material icon component includes the icon name in PascalCase.

For example to use the 'access alarm' icon component, import @material-ui/icons/AccessAlarm.

Note: One exception is '3d rotation', which is named ThreeDRotation.

Examples

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:

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

If your environment support tree-shaking you can also import the icons that way:

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

Note: Importing named exports in this way will result in the code for every icon being included in your project, so is not recommended unless you configure tree-shaking.

Upgrading

If you are upgrading an existing project from Material-UI 0.x.x, you will need to revise the import paths from material-ui/svg-icons/<category>/<icon-name> to @material-ui/icons/<IconName>.

Here's a jscodeshift codemod to help you upgrade.

Keywords

FAQs

What is @material-ui/icons?

Is @material-ui/icons popular?

Is @material-ui/icons well maintained?

Last updated on 07 Apr 2018

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