React Material Symbols

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

Authors

@ed-software

Installation

Install with npm

  npm i react-material-symbols

Import

// Variant can be outlined, rounded or sharp.
import Icon from 'react-material-symbols/[variant]';
// If you need to access the type of the component props.
import { type MaterialSymbolProps } from '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 Icon from 'react-material-symbols/rounded';

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