UNPKG

@react-md/material-icons

Version:

Material Design Icon components for react-md

83 lines (60 loc) 1.97 kB
# @react-md/material-icons This package converts each [material icon](https://fonts.google.com/icons?icon.set=Material+Icons) into a `React` component as inline SVG icons. ## Documentation Check out the [documentation site] to see all the available icons and in-depth usage. ## Installation With [npm]: ```sh npm install --save @react-md/core @react-md/material-icons ``` With [pnpm]: ```sh pnpm add @react-md/core @react-md/material-icons ``` With [yarn]: ```sh yarn add @react-md/core @react-md/material-icons ``` ## Add base styles If you only want to use the icons in this package without the rest of `react-md`: ```scss @use "@react-md/core" with ( $icon-disable-font: true, $icon-disable-symbol: true, $icon-disable-inline: true, $icon-disable-spacing-before: true, $icon-disable-spacing-after: true, $icon-disable-spacing-above: true, $icon-disable-spacing-below: true, $icon-disable-primary-color: true, $icon-disable-secondary-color: true, $icon-disable-warning-color: true, $icon-disable-error-color: true, $icon-disable-success-color: true, $icon-disable-text-primary-color: true, $icon-disable-text-secondary-color: true, $icon-disable-text-hint-color: true, $icon-disable-text-disabled-color: true, $icon-disable-dense: true, $icon-disable-rotator: true, $disable-default-system-theme: true ); @include core.icon-styles; ``` If you are using `react-md` already and only want to use the SVG icons in this package: ```scss @use "@react-md/core" with ( $icon-disable-font: true, $icon-disable-symbol: true ); @include core.styles; ``` ## Use the icon components The [documentation site] will allow you to search and find all the available icons, but here's a quick example. ```tsx import FavoriteOutlinedIcon from "@react-md/material-icons/FavoriteOutlinedIcon"; function Example() { return <FavoriteOutlinedIcon />; } ``` [documentation site]: https://react-md.dev/material-icons-and-symbols