# @react-md/icon
> This package is for including icons within react-md. There is included support for both font icons and SVG icons. There is also a helper component for applying spacing between icons and text.
Latest version **5.1.6** (published 2023-12-11) · MIT license · 0 weekly downloads
## Install
```sh
npm install @react-md/icon
pnpm add @react-md/icon
yarn add @react-md/icon
bun add @react-md/icon
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 5.1.6 |
| Published | 2023-12-11 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 143.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mikkel Laursen |
| Maintainers | mlaursen |
| Keywords | react-md, material design, react, icon, font icon, svg icon, component, components |
## Links
- npm: https://www.npmjs.com/package/@react-md/icon
- Repository: https://github.com/mlaursen/react-md
- Homepage: https://react-md.dev/packages/icon/demos
- Issues: https://github.com/mlaursen/react-md/issues
- npm.io page: https://npm.io/package/@react-md/icon
## Dependencies (4)
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@react-md/theme](https://npm.io/package/@react-md/theme.md) ^5.1.6
- [@react-md/utils](https://npm.io/package/@react-md/utils.md) ^5.1.6
- [@react-md/typography](https://npm.io/package/@react-md/typography.md) ^5.1.6
## Alternatives
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads
## Recent versions
- 5.1.6 (latest) — 2023-12-11
- 3.0.0-alpha.0 (next) — 2021-08-11
- 5.1.3 — 2022-05-07
- 5.1.2 — 2022-04-02
- 5.1.0 — 2022-03-18
- 5.0.0 — 2022-01-31
- 4.0.3 — 2022-01-01
- 4.0.1 — 2021-11-27
- 4.0.0 — 2021-11-24
- 3.1.0 — 2021-09-10
- 3.0.0 — 2021-08-13
- 2.9.1 — 2021-07-27
- 2.9.0 — 2021-07-18
- 2.8.4 — 2021-06-10
- 2.8.3 — 2021-05-18
- … 41 more at https://npm.io/package/@react-md/icon/versions
## README
# @react-md/icon
Create icons using a font-icon library like material-icons or font-awesome or
plain old accessible SVG icons. There are also a few additional helpers to
creating animating rotating icons and separating text from an icon.
## Installation
```sh
npm install --save @react-md/icon
```
It is also recommended to install the other packages if you have not done so:
```sh
npm install --save @react-md/theme @react-md/typography
```
## Pre-made material icons
If you would like to have access to all material icons as existing components
instead of having to manually remember the correct `children` to provide or the
correct `path`, you can install the `@react-md/material-icons` package. This
will include **all** material icons as font and SVGs.
## Documentation
You should check out the
[full documentation](https://react-md.dev/packages/icon/demos) for live examples
and more customization information, but an example usage is shown below.
## Usage
Even though the `FontIcon` and `SVGIcon` components are the "main" exports for
this package, they are more utility components and probably won't be used much
once you set up your own icon system. The _real_ exports are going to be the
`TextIconSpacing` and `IconRotator` components.
The `TextIconSpacing` component is used to add spacing between an icon and some
"text" where the text can be any renderable element. The `IconRotator` is used
to animate an icon rotation such as expander or collapse icons.
```tsx
import { render } from "react-dom";
import { FontIcon, TextIconSpacing } from "@react-md/icon";
import { Typography } from "@react-md/typography";
// the Typography component is optional, it'll just add better typography
// than normal text.
const App = () => (
<>
// creates an icon spaced before the "Go Home" text
home}>
Go Home
// creates an icon spaced after the "Go Home" text
home} iconAfter>
Go Home
// it can also be combined
arrow_back}>
home} iconAfter>
Go Home
);
render(, document.getElementById("root"));
```
This package's icon component usage is really only helpful when generating icon
components through an external script or using font icons. However, here are a
few examples of using the `FontIcon` and `SVGIcon` components:
```tsx
import { render } from "react-dom";
import { FontIcon, SVGIcon } from "@react-md/icon";
// When using font icons, you'll need to make sure they icon fonts have been
// correctly included in your app. Check out the documentation site for more
// info
const App = () => (
<>
home
);
render(, document.getElementById("root"));
```
---
_Source: https://npm.io/package/@react-md/icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._