# mdi-preact

> Material Design Icons for Preact

Latest version **9.4.0** (published 2023-12-27) · (MIT AND OFL-1.1) license · 0 weekly downloads

## Install

```sh
npm install mdi-preact
pnpm add mdi-preact
yarn add mdi-preact
bun add mdi-preact
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 9.4.0 |
| Published | 2023-12-27 |
| First published | 2017-09-22 |
| Weekly downloads | 0 |
| License | (MIT AND OFL-1.1) |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 21.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 145 |
| Author | Levin Rickert |
| Maintainers | levrik |
| Keywords | mdi, preact, material, design, icons |

## Links

- npm: https://www.npmjs.com/package/mdi-preact
- Repository: https://github.com/levrik/mdi-react
- Issues: https://github.com/levrik/mdi-react/issues
- npm.io page: https://npm.io/package/mdi-preact

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 9.4.0 (latest) — 2023-12-27
- 9.3.0 — 2023-10-07
- 9.2.0 — 2023-03-20
- 9.1.0 — 2023-01-13
- 9.0.0 — 2022-07-20
- 8.6.0 — 2022-06-30
- 8.5.0 — 2022-06-29
- 8.4.0 — 2022-05-17
- 8.3.1 — 2022-03-28
- 8.3.0 — 2022-03-28
- 8.2.0 — 2021-11-13
- 8.1.0 — 2021-10-25
- 8.0.0 — 2021-10-18
- 7.5.0 — 2021-03-09
- 7.4.0 — 2020-10-23
- … 27 more at https://npm.io/package/mdi-preact/versions

## README

# mdi-preact [![npm package](https://img.shields.io/npm/v/mdi-preact.svg?style=flat-square)](https://npmjs.org/package/mdi-preact) [![Material Design Icons version](https://img.shields.io/badge/mdi-v7.4.47-blue.svg?style=flat-square)](https://materialdesignicons.com) [![build status](https://img.shields.io/travis/levrik/mdi-preact/master.svg?style=flat-square)](https://travis-ci.org/levrik/mdi-preact)
[Material Design Icons](https://materialdesignicons.com) for Preact/React packaged as single components

**New v9.4.0 released: See [CHANGELOG.md](./CHANGELOG.md)**

## Installation

```bash
npm install mdi-preact
# or if you use Yarn
yarn add mdi-preact
```

Support for [React](https://reactjs.org/) is available via the `mdi-react` package.

## Usage

Just search for an icon on [materialdesignicons.com](https://materialdesignicons.com) and look for its name.  
The name translates to PascalCase followed by the suffix `Icon` in `mdi-preact`.  
Also it's possible to import with an alias. You can find them on the detail page of the respective icon.

For example the icons named `alert` and `alert-circle`:

```javascript
import AlertIcon from 'mdi-preact/AlertIcon';
import AlertCircleIcon from 'mdi-preact/AlertCircleIcon';

const MyComponent = () => {
  return (
    <div>
      {/* The default color is the current text color (currentColor) */}
      <AlertIcon color="#fff" />
      {/* The default size is 24 */}
      <AlertCircleIcon class="some-class" size={16} />
      {/* This sets the icon size to the current font size */}
      <AlertIcon size="1em" />
    </div>
  );
};
```

To change the color on hover you can just use your own class and plain CSS.

```css
.some-class:hover {
  fill: red;
}
```

You can also add default styling via the `mdi-icon` class.

```css
.mdi-icon {
  background-color: green;
}
```

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