@hdoc/react-material-icons NPM

@hdoc/react-material-icons

Simple component for material design icons in your React app.

Material Icons screenshot

Installation

npm install @hdoc/react-material-icons @material-design-icons/font

Usage

Import @material-design-icons/font in your entry file (example: src/main.jsx in Vite):

import "@material-design-icons/font";

:information_source: Check @material-design-icons/font docs for more info.

Then, in your App.jsx or another file:

import { Icon } from "@hdoc/react-material-icons";

function App() {
  return (
    <>
      ...
      <Icon name="shopping_cart" size="large" variant="outlined" />
    </>
  );
}

Props

All props are optional unless otherwise specified.

name (required)

The name of the icon.

Type: string

color

The color of the icon.

className

Additional class names for extending styles.

Type: string

disabled

Whether the icon is disabled.

Type: boolean

size

Font size for the icon.

Type: 'small' | 'large'

variant

Variant of the icon.

Type: 'outlined' | 'round' | 'sharp' | 'two-tone'

Customization

You can customize the color and size of the icon by using the following CSS custom properties:

.any-parent,
.class-to-extend-styles {
  --icon-color: black; /* default color */
  --icon-color-disabled: gray;

  --icon-size: 24px; /* default size */
  --icon-small: 18px;
  --icon-large: 36px;

  /* COLOR VARIANTS */
  --primary: lightblue;
  --secondary: lightpink;
  --error: red;
  --warning: orange;
  --info: blue;
  --success: green;
}