React Material Symbols

A simple package for adding Material Symbols to any React project.

Authors

• @ed-software

Installation

Install with npm

  npm i react-material-symbols

Props

type MaterialSymbolProps

| Prop | Type | Description | | :------- | :------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | icon | '10k' \| '10mp' \| ... 2368 more ... \| 'zoom_out_map' | Required. The name of the icon to render. | | fill | boolean \| undefined | Default false. Fill gives you the ability to modify the default icon style. A single icon can render both unfilled and filled states. | | weight | 100 \| 200 \| ... 6 more ... \| 900 \| undefined | Default inherit. Weight defines the symbol’s stroke weight, with a range of weights between thin (100) and heavy (900). Weight can also affect the overall size of the symbol. | | grade | number \| undefined | Default inherit. Weight and grade affect a symbol’s thickness. Adjustments to grade are more granular than adjustments to weight and have a small impact on the size of the symbol. | | size | number \| undefined | Default inherit. Size defines the icon width and height in pixels. For the image to look the same at different sizes, the stroke weight (thickness) changes as the icon size scales. | | color | string \| undefined | Default inherit. Color accepts key values ('red', 'blue', 'indigo', etc.), <hex-color>, <rgb()>, <hsl()> and <hwb()> values. | | as | React.ElementType \| undefined | Default 'span'. Set the HTML Element for the icon. |

Examples

import { MaterialSymbol } from 'react-material-symbols';
import 'react-material-symbols/rounded'; // Place in your root app file. There are also `sharp` and `outlined` variants.

export default function App() {
  return (
    <MaterialSymbol icon="folder" size={24} fill grade={-25} color='red' />
  )
}

Demo

https://react-material-symbols.vercel.app/

License

Material Symbols are created by Google.

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required.