How to use fontawesome - Angular
Tags: angular, styles
Published: 2023-09-07 11:50:49

---
title: How to use fontawesome - Angular
published: true
date: 2023-03-20 00:00:00 UTC
tags: angular, styles
canonical_url: https://www.mariokandut.com/how-to-use-fontawesome-in-angular/
---

> This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3

[FontAwesome](https://fontawesome.com/) is a popular icon library that provides scalable vector icons. It's easy to use FontAwesome in Angular with the `@fortawesome/angular-fontawesome` package, which provides Angular components for FontAwesome icons. This article is about how to use fontawesome in your Angular project.

If you want to know how to install, head over to [How to install fontawesome in Angular](https://www.mariokandut.com/how-to-add-fontawesome-to-your-angular-project/).

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#how-to-use-fontawesome-5-in-angular-15)How to use fontawesome 5+ in Angular 15?

After successfully installing fontawesome in your Angular project. Follow these three steps:

1. Add the `FontAwesomeModule`.
2. Tie the icon to the property in your component
3. Use the icon in your template.

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#1-add-the-module-in-appmodulets)1. Add the module in `app.module.ts`

Add `FontAwesomeModule` to `imports` in `src/app/app.module.ts`.

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [BrowserModule, FontAwesomeModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#2-tie-the-icon-to-the-property-in-your-component)2. Tie the icon to the property in your component

Bind the icon you want to use to a variable in the component, where the icon should be used, for example `src/app/app.component.ts`.

```
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  faCoffee = faCoffee;
}
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#3-use-the-icon-in-your-template)3. Use the icon in your template

Provide the icon to the `icon` property in `fa-icon` component.

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

Instead of using property binding you can also supply an array with string values directly in your template. This is useful when layering icons, see [Fontawesome Docs - Layering](https://fontawesome.com/docs/web/style/layer).

```
<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-icon
    [inverse]="true"
    [icon]="['fas', 'spinner']"
    transform="shrink-6"
  ></fa-icon>
</fa-layers>
```

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)TL;DR

- To use Font Awesome in Angular,

Thanks for reading and if you have any **questions** , use the **comment** function or **send me a message** **[@mariokandut](https://www.twitter.com/mariokandut)**. If you want to know more about **[Angular](https://www.mariokandut.com/tags/angular)**, have a look at these [Angular Tutorials](https://www.mariokandut.com/tags/angular).

**References (and Big thanks):**[Angular](https://angular.io/docs),[fontawesome](https://fontawesome.com/)[Angular Component for Font Awesome](https://www.npmjs.com/package/@fortawesome/angular-fontawesome)