@fortawesome/angular-fontawesome

What is @fortawesome/angular-fontawesome?

@fortawesome/angular-fontawesome is an Angular wrapper for Font Awesome, a popular icon toolkit. It allows you to easily integrate Font Awesome icons into your Angular applications.

What are @fortawesome/angular-fontawesome's main functionalities?

Basic Icon Usage

This feature allows you to use Font Awesome icons in your Angular templates. The example shows how to include a 'coffee' icon from the 'fas' (Font Awesome Solid) icon set.

<fa-icon [icon]="['fas', 'coffee']"></fa-icon>

Customizing Icons

You can customize the appearance of the icons by applying styles directly. The example demonstrates how to change the color and size of the 'coffee' icon.

<fa-icon [icon]="['fas', 'coffee']" [styles]="{ color: 'red', 'font-size': '24px' }"></fa-icon>

Using Icon Libraries

This feature allows you to add entire icon packs to the library, making them available throughout your application. The example shows how to add the 'fas' (Font Awesome Solid) icon pack.

import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';

constructor(library: FaIconLibrary) {
  library.addIconPacks(fas);
}

Dynamic Icons

You can dynamically change the icon based on component properties. The example shows how to bind the icon to a component property called 'dynamicIcon'.

<fa-icon [icon]="dynamicIcon"></fa-icon>

Other packages similar to @fortawesome/angular-fontawesome

ngx-bootstrap-icons

ngx-bootstrap-icons is an Angular library for using Bootstrap icons. It provides a similar functionality to @fortawesome/angular-fontawesome but uses Bootstrap's icon set instead of Font Awesome.

angular-material-icons

angular-material-icons is an Angular module that allows you to use Material Design icons in your Angular applications. It offers similar features to @fortawesome/angular-fontawesome but uses Google's Material Design icons.

README

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@<version>

Using Yarn

$ yarn add @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ yarn add @fortawesome/angular-fontawesome@<version>

Using NPM

$ npm install @fortawesome/free-solid-svg-icons
# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>

Compatibility table

@fortawesome/angular-fontawesome	Angular	Font Awesome
3.x	20.x	5.x && 6.x && 7.x
2.x	20.x	5.x && 6.x
1.x	19.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:

• Add FontAwesomeModule to the imports and tie the icon to the property in your component src/app/app.component.ts:

  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-<KIT_ID>/icons/slab/regular";
  
  
  @Component({
    selector: 'app-root',
    imports: [FontAwesomeModule], // alternatively, individual components can be imported
    templateUrl: './app.component.html'
  })
  export class AppComponent {
    faCoffee = faCoffee;
  }
  

• Use the icon in the template src/app/app.component.html:

  <fa-icon [icon]="faCoffee" />
  

Documentation

• In-depth usage guide
• Using other styles
• Full feature list
• Upgrading instructions
• Frequency asked questions

Examples

Stackblitz

Here's a StackBlitz Starter Sample on how to display Solid, Regular, and Brand icons 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 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.

Changelog

3.0.0 (2025-08-03)

The release should be backwards compatible with 2.x, but since we bump the major dependency on @fortawesome/fontawesome-svg-core to 7.0.0, it is a major release. Please open an issue if you find any incompatibilities.

Added

• Support for Font Awesome 7.

Changed

• Reverted the change from 2.0.0 making the icon property in fa-icon and fa-duotone-icon components required at compile-time.
• Update documentation to use self-closing tags for fa-icon and fa-duotone-icon components.