@hrc/material-icons

Simple component for Material Design Icons font in your React app

lockfavoritefacedescription

Demo generated with code from Usage section

Installation

npm

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

pnpm

pnpm add @hrc/material-icons @material-design-icons/font

yarn

yarn add @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:

• Icon

API

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

• <Icon />