angular-fontawesome


Official Angular component for Font Awesome 5+

Installation

If you have FontAwesome Pro subscription, make sure to configure access before following the installation instructions.

> Note: Pro+ Icons are only available in Kit Packages
> Along with a Pro+ Plan, you'll need to install a downloaded Kit package to use any of our Pro+ Icons — they are not available in any other packages.
> Read more.

Using ng add:

``


See Compatibility table below to choose a correct version


$ ng add @fortawesome/angular-fontawesome@
`

Using Yarn
`
$ yarn add @fortawesome/free-solid-svg-icons


See Compatibility table below to choose a correct version


$ yarn add @fortawesome/angular-fontawesome@
`

Using NPM
`
$ npm install @fortawesome/free-solid-svg-icons


See Compatibility table below to choose a correct version


$ npm install @fortawesome/angular-fontawesome@
`

$3

| @fortawesome/angular-fontawesome | Angular | Font Awesome |
|----------------------------------|---------|-------------------|
| 4.x | 21.x | 5.x && 6.x && 7.x |
| 3.x | 20.x | 5.x && 6.x && 7.x |
| 2.x | 20.x | 5.x && 6.x |

See the compatibility page for older versions.

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';

// Import from Kit Packages (Pro+ Icons)
// import {faCloud} from "@awesome.me/kit-/icons/slab/regular";


@Component({
selector: 'app-root',
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
* Using other styles
* Full feature list
* Upgrading instructions
* Frequency asked questions

Examples

$3

Here's a StackBlitz Starter Sample on how to display Solid, Regular, and Brand icons using the Icon Library.

$3

You can find examples in the projects/demo directory. You can follow the docs to run the demo app on your own machine.

Contributing

angular-fontawesome` is a product of the community, you can take a look at the developer docs 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.

If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.