react-icons-material-design
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

react-icons-material-design

npm version npm downloads

A library of React components for Material Design Icons created by Google. This library is a fork of tabler-icons-react with some modifications. Special thanks to @konradkalemba for his work.

Features

  • Zero dependencies.
  • TypeScript friendly.
  • 3000+ icons with variants: Filled, Outlined, Round, Sharp, TwoTone. You can explore and choose your icons at Material Design Icons.
  • SVGs optimized with SVGO.
  • Easy to import using named exports.
  • Tree-shakeable verified by agadoo.

Installation

The package is available via npm and can be installed using npm or yarn:

# npm
npm install react-icons-material-design

# yarn
yarn add react-icons-material-design

Usage

After installing the package, you can import React Material Icons as React components:

import {
  IconLocationCityFilled,
  IconLocationCityOutlined,
  IconLocationCityRound,
  IconLocationCitySharp,
  IconLocationCityTwoTone,
} from 'react-icons-material-design';

Examples

  1. Basic usage:
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';

export default function Example() {
  return (
    <div>
      <IconLocationCityFilled color='red' size={24} />
    </div>
  );
}
  1. Usage with a custom component:
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';

export default function Example() {
  return (
    <div>
      <YourIconComponent icon={IconLocationCityFilled} />
      <YourIconComponent icon={<IconLocationCityFilled />} />
      <YourIconComponent icon={<IconLocationCityFilled size={24} color='red' />} />
    </div>
  );
}

Styling

You can pass additional props to adjust the icon.

name type default
size Number,String '1em'
color String currentColor
import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';

export default function Example() {
  return (
    <div>
      <IconLocationCityFilled color='red' size={24} />
    </div>
  );
}

We can also style using CSS:

  • Icons are already set with width="1em" height="1em" allowing you to change the size via font-size.
  • Icons are already set with fill=currentColor allowing you to change the color via color.

CSS

import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';

export default function Example() {
  return (
    <div>
      <IconLocationCityFilled style={{ fontSize: '2em', color: 'green' }} />
    </div>
  );
}

TailwindCSS

import React from 'react';
import { IconLocationCityFilled } from 'react-icons-material-design';

export default function Example() {
  return (
    <div>
      <IconLocationCityFilled className="text-3xl text-green-700" />
    </div>
  );
}

License

This project is licensed under the MIT License.

Readme

Keywords

Package Sidebar

Install

npm i react-icons-material-design

Weekly Downloads

34

Version

1.0.4

License

MIT

Unpacked Size

23.3 MB

Total Files

10617

Last publish

Collaborators

  • huongdevvn