# angular-fontawesome [![npm](https://img.shields.io/npm/v/@fortawesome/angular-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/angular-fontawesome) Official Angular component for Font Awesome 5+ ## Installation If you have [FontAwesome Pro](https://fontawesome.com/plans) subscription, make sure to [configure access](https://fontawesome.com/docs/web/setup/packages#_1-configure-access) before following the installation instructions. Using `ng add`: ``` # See Compatibility table below to choose a correct version $ ng add @fortawesome/angular-fontawesome@ ``` Using [Yarn](https://yarnpkg.com) ``` $ yarn add @fortawesome/free-solid-svg-icons # See Compatibility table below to choose a correct version $ yarn add @fortawesome/angular-fontawesome@ ``` Using [NPM](https://www.npmjs.com/) ``` $ npm install @fortawesome/free-solid-svg-icons # See Compatibility table below to choose a correct version $ npm install @fortawesome/angular-fontawesome@ ``` ### Compatibility table | @fortawesome/angular-fontawesome | Angular | Font Awesome | ng-add | |----------------------------------|------------|--------------|---------------| | 0.1.x | 5.x | 5.x | not supported | | 0.2.x | 6.x | 5.x | not supported | | 0.3.x | 6.x && 7.x | 5.x | not supported | | 0.4.x, 0.5.x | 8.x | 5.x | not supported | | 0.6.x | 9.x | 5.x | supported | | 0.7.x | 10.x | 5.x | supported | | 0.8.x | 11.x | 5.x | supported | | 0.9.x | 12.x | 5.x | supported | | 0.10.x | 13.x | 5.x && 6.x | supported | | 0.11.x | 14.x | 5.x && 6.x | supported | | 0.12.x | 15.x | 5.x && 6.x | supported | | 0.13.x | 16.x | 5.x && 6.x | supported | | 0.14.x | 17.x | 5.x && 6.x | supported | | 0.15.x | 18.x | 5.x && 6.x | supported | ## Usage To get up and running using Font Awesome with Angular follow the below steps: 1. Add `FontAwesomeModule` to the `imports` and tie the icon to the property in your component `src/app/app.component.ts`: ```typescript import { Component } from '@angular/core'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; import { faCoffee } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-root', standalone: true, imports: [FontAwesomeModule], // alternatively, individual components can be imported templateUrl: './app.component.html' }) export class AppComponent { faCoffee = faCoffee; } ``` 1. Use the icon in the template `src/app/app.component.html`: ```html ``` ## Documentation * [In-depth usage guide](./docs/usage.md) * [Using other styles](./docs/usage/using-other-styles.md) * [Full feature list](./docs/usage/features.md) * [Upgrading instructions](UPGRADING.md) * [Frequency asked questions](./docs/faq.md) ## Examples ### Stackblitz Here's a [StackBlitz Starter Sample](https://stackblitz.com/edit/angular-ivy-7jrcne) on how to display Solid, Regular, and Brand icons [using the Icon Library](./docs/usage/icon-library.md#using-the-icon-library). ### Demo application You can find examples in the `projects/demo` directory. You can follow [the docs to run the demo app](./DEVELOPER.md#setting-up-the-local-environment) on your own machine. ## Contributing `angular-fontawesome` is a product of the community, you can take a look at the [developer docs](./DEVELOPER.md) to find about more on how to contribute back to the project. ## Contributors The following contributors have either helped to start this project, have contributed code, are actively maintaining it (including documentation), or in other ways being awesome contributors to this project. **We'd like to take a moment to recognize them.** [

	Stars	Issues	Version	Updated	Created
@fortawesome/angular-fontawesome	1,470	12	0.15.0	4 months ago	7 years ago
font-awesome	73,530	4,062	4.7.0	8 years ago	11 years ago
material-design-icons	50,421	322	3.0.1	8 years ago	10 years ago

@fortawesome/angular-fontawesome vs font-awesome vs material-design-icons

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past