How to Install & Use Angular FontAwesome

In this guide let us learn to install and use Angular FontAwesome icons. FontAwesome is the most popular icon set and toolkit. It has both paid & free versions. This guide shows you how to use the Free version of Angular FontAwesome.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Installing FontAwesome

The main package is @fortawesome/angular-fontawesome. You can install the latest version using the following command.

Or You can install a particular version as shown below

But before installing you need to know which version to install. Not all versions are compatible with the various Angular versions. The following table should give you an idea

Angular Fontawesome VersionAngular Version
0.1.x5.x
0.2.x
6.x
0.3.x6.x && 7.x
0.4.x, 0.5.x8.x
0.6.x9.x

Installing Icons

Next, we need to install icons. There are five icon sets available in FontAwesome. They are Solid, Regular, Light, Duotone & Brands. Out of which Solid, Regular & Brands has free icons. Light and Duotone only available as pro packages

Using FontAswesome

Now there are two ways by which you can use the FontAwesome

  1. Directly in Component
  2. Using Icon library

Directly in Component

This method is useful when you use the FontAwesome in a few select components.

app.module.ts

Open the app.module.ts and import the FontAwesomeModule Module from the @fortawesome/angular-fontawesome library. Add it to imports metadata.


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

app.component.ts

In the component file import the icon. For example, we have imported the faCoffee icon from the solid icons package.

app.component.html

You can use it as shown below in the template. We use the fa-icon directive. Pass the icon to the icon property using the property binding.

Example

The following example shows how to use multiple icons

app.component.ts

app.component.html

Using Icon library

This method allows you to define the icons once in app.module and use it across the application. We add the icons using the addIcons() or addIconPacks() methods of the FaIconLibrary

app.module.ts

  1. Import FontAwesomeModule & FaIconLibrary library.
  2. Import the icons, which you want to use from the icons packages.
  3. Inject the FaIconLibrary in the app.module constructor.
  4. Finally, add the icons to the FaIconLibrary library using the addIcons method.

The following example shows, how we can add icons to the icons library.

app.component.ts

No need to import anything the component class.

app.component.html

In the template use the fa-icon directive. Pass the icon along with the package prefix to the icon property using the property binding. The syntax is [icon]="[prefix, iconName]". The prefixes are fas, far & fab for Solid, Regular and Brands icons respectively.

Search for Icons

You can search for icons from this link.

Features of FontAwesome

size

Rotate

Flip

Animations

Border

Pull

Styles

References

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top