https://github.com/levrik/mdi-react

Material Design Icons for React/Preact packaged as single components
https://github.com/levrik/mdi-react

icons javascript material react reactjs

Last synced: about 1 year ago
JSON representation

Material Design Icons for React/Preact packaged as single components

• Host: GitHub
• URL: https://github.com/levrik/mdi-react
• Owner: levrik
• License: other
• Created: 2016-07-10T11:37:11.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-09-26T21:47:44.000Z (over 1 year ago)
• Last Synced: 2025-03-31T22:22:35.782Z (about 1 year ago)
• Topics: icons, javascript, material, react, reactjs
• Language: JavaScript
• Homepage:
• Size: 283 KB
• Stars: 146
• Watchers: 2
• Forks: 23
• Open Issues: 12
• Metadata Files:
  • Readme: README-preact.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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 (

    


      {/* The default color is the current text color (currentColor) */}

      

      {/* The default size is 24 */}

      

      {/* This sets the icon size to the current font size */}

      

    

  );

};

```


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;

}

```