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.