material-icons-react

Google material icons implementation for React

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
material-icons-react
1.0.44 years ago5 years agoMinified + gzip package size for material-icons-react in KB

Readme

material-icons-react
Build Status

NOTE: Version 1.0.4 release

  • Demo app updated
  • Fix for #28

NOTE: Version 1.0.3 release

  • Demo app added
  • Fix for #1
  • Fix for #11
  • Fix for #12
  • Fix for #13
  • Passing in className prop will replace the default icon styles, defaultColor and inactive styles. Own styles for these should be provided if className prop is defined.

Introduction

This package provides a convenient react component for using Google's Material Icons in your react application.

Features

Usage

Import module using the following statement.
import MaterialIcon, {colorPalette} from 'material-icons-react';

  1. Rendering an icon is straightforward.

<MaterialIcon icon="dashboard" />
<MaterialIcon icon="alarm_on" />
  1. Change the icon size by using the size property.

<MaterialIcon icon="dashboard" size='large' />
<MaterialIcon icon="dashboard" size={100} />
  1. Invert the icon by using the invert property.
<MaterialIcon icon="dashboard" invert />
  1. Make the icon inactivate by using the inactive property.
<MaterialIcon icon="dashboard" inactive />
<MaterialIcon icon="dashboard" color={colorPalette.amber._200} />
<MaterialIcon icon="dashboard" color={colorPalette.amber.A700} />
  • Using a custom color.
<MaterialIcon icon="dashboard" color='#7bb92f' />

Showing a preloader until the icon is rendered(For slow connections)

  1. CSS

.lds-ripple {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #921515;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

  1. Preloader element

let loader = <div className="lds-ripple"><div></div><div></div></div>

  1. Icon

<MaterialIcon icon="dashboard" preloader={loader} />

Icon size matrix

| Alias | Size | |-------|-----:| | tiny | 18px | | small | 24px | | medium| 36px | | large | 48px |

Contributions

Please feel free to create PR for any improvements and contributions.

License

MIT