Skip to content
<hrc />

@hrc/material-icons

Simple component for Material Design Icons font in your React app

Demo generated with code from Usage section

Installation

Terminal window
npm install @hrc/material-icons @material-design-icons/font

Usage

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

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

  2. Use the component in your project:

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

    export function PackageDemo() {
      return (
        <>
          <Icon name="lock" variant="outlined" size="small" />
          <Icon name="favorite" color="error" />
          <Icon name="face" color="secondary" />
          <Icon name="description" color="primary" size="large" />
        </>
      );
    }

Demos

For examples and details on the usage of the component, see the demo page:

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for icon component: