Material Design Icon components for react-md
npm install @react-md/material-iconsThis package converts each material icon into a React component as inline SVG icons.
Check out the [documentation site] to see all the available icons and in-depth usage.
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
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;
`
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
}
``
[documentation site]: https://react-md.dev/material-icons-and-symbols