# @material/react-material-icon

> Material Components React Material Icon

Latest version **0.15.0** (published 2019-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @material/react-material-icon
pnpm add @material/react-material-icon
yarn add @material/react-material-icon
bun add @material/react-material-icon
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.15.0 |
| Published | 2019-07-22 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 64 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abhiomkar, acdvorak, aprigogin, azakus, bicknellr, bonniez, bwobrien, kfranqueiro, lynnjepsen, material-admin, moog16, patrickrodee, williamernest |
| Keywords | mdc web react, material components react, material design, material icon, materialicon |

## Links

- npm: https://www.npmjs.com/package/@material/react-material-icon
- Repository: https://github.com/material-components/material-components-web-react
- Homepage: https://github.com/material-components/material-components-web-react#readme
- Issues: https://github.com/material-components/material-components-web-react/issues
- npm.io page: https://npm.io/package/@material/react-material-icon

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [@material/react-ripple](https://npm.io/package/@material/react-ripple.md) ^0.15.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.15.0 (latest) — 2019-07-22
- 0.14.1 — 2019-07-02
- 0.14.0 — 2019-06-25
- 0.13.0 — 2019-05-30
- 0.12.0 — 2019-05-01
- 0.11.0 — 2019-03-19
- 0.10.0 — 2019-02-19
- 0.9.0 — 2019-01-23
- 0.8.0 — 2018-12-28
- 0.7.1 — 2018-11-30
- 0.7.0 — 2018-11-20
- 0.6.2 — 2018-11-07
- 0.6.1 — 2018-10-25
- 0.6.0 — 2018-10-24
- 0.5.0 — 2018-09-25
- … 6 more at https://npm.io/package/@material/react-material-icon/versions

## README

# React Material Icon

A React wrapper for [Material Icons](http://material.io/tools/icons).

## Installation

```
npm install @material/react-material-icon
```

## Usage

### Styles

with Sass:
```js
import '@material/react-material-icon/index.scss';
```

with CSS:
```js
import '@material/react-material-icon/dist/material-icon.css';
```

#### Importing Icons

The React material icon package does not come packaged with [Google Font's Material Icons](https://google.github.io/material-design-icons/). If it was included in the Sass package this would block rendering of the page until the icons download.

There are two different ways to add Material Icons to your website, both of which are documented in [Material Icons Documentation](https://google.github.io/material-design-icons/#icon-font-for-the-web). We recommend "Method 1: via Google Web Fonts", because it renders faster, but there can be Flash Of Unstyled Content (**FOUC**). The code to load Material Icons via Google Web Fonts is pasted here for your convenience.
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
```

##### Preventing FOUC and Troubleshooting Ripple

There is a known issue if you turn on the ripple on the Material Icon component. If FOUC occurs, the ripple size will be calculated off of the text width/height. To get around this, give the component a predetermined width/height in your CSS (or inline styles). Original issue documented [here](https://github.com/material-components/material-components-web/issues/2702).

### Javascript Instantiation

```js
import MaterialIcon from '@material/react-material-icon';

const MyComponent = () => {
  return (
    <MaterialIcon icon='menu' />
  );
}
```

## Props

Prop Name | Type | Description
--- | --- | ---
icon | string | Type of icon to be displayed.
className | string | Classes to pass on to the root `<i>` element.
hasRipple | n/a | If present on element, it will enable the ripple on the icon.

## Usage with Icons

Please see our [Best Practices doc](../../docs/best-practices.md#importing-font-icons) for further reading.

---
_Source: https://npm.io/package/@material/react-material-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._