React-material-symbols NPM

React Material Symbols

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

foo

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.