material-symbols-react

Material Symbols for React

A simple React component wrapper for Material Symbols on-top of Ravindra Marella's npm package of Google's Material Symbols.

Author: Bryan Waldeva

Installation (npm)

npm install material-symbols-react

Usage (JSX/TSX)

import { MaterialSymbol } from "material-symbols-react";

export default function Component() {
  return (
    <MaterialSymbol symbol="home" />
  )
}

Props

Refer to the Google Material Symbols Documentation from Ravindra Marella for list of symbols (icons) and details on the effect of the props below.

Prop	Type (Typescript)	Notes
symbol	'10k' | '10mp' | ... | 'zoom_out_map'	Required. Refer to Google Material Symbols Documentation.
styling	outlined | rounded | sharp	Optional. Default false.
filled	boolean | undefined	Optional. Default false.
weight	100 | ... | 700 | undefined	Optional. Default 400.
grade	-25 | ... | 100 | undefined	Optional. Default 0.
size	20 | ... | 48 | undefined	Optional. Default 24. Refer to Optical Size in documentation.
className	string | undefined	Optional. Default undefined. You can set any CSS className for additional styling.
ref	React.ForwardRef<HTMLSpanElement> | undefined	Optional. Default undefined. Can forward a ref to the underlying span element.
...props	... | undefined	Optional. Default undefined. Any additional component props applicable to a span element.

License

Material Symbols are created by Google. Ravindra Marella's NPM package of the Material Symbols is distributed with an Apache 2.0 License This package is distributed with an MIT License.