How to add fontawesome - Angular
Tags: angular, javascript, typescript
Published: 2023-03-17 21:23:18

---
title: How to add fontawesome - Angular
published: true
date: 2023-03-12 00:00:00 UTC
tags: angular, javascript, typescript
canonical_url: https://www.mariokandut.com/how-to-add-fontawesome-to-your-angular-project/
---

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

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators, see [fontawesome](https://fontawesome.com/). It has two versions, pro(paid) and free. The pro version gives you more icons and human support and has slightly different installation procedure. This article is about different methods on how to install fontawesome version (free) in 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-add-fontawesome-5-in-angular-15)How to add fontawesome 5+ in Angular 15?

The preferred way to add Font Awesome to Angular is via the officially supported [Angular Component for Font Awesome 5+](https://www.npmjs.com/package/@fortawesome/angular-fontawesome). This makes the installation easy and should be done in no time.

You have three options to add this NPM package:

1. Use `ng add`
2. Use `yarn`
3. Use `npm`

To illustrate I'll start with an empty Angular project. Hence, let's create an empty Angular project

```
ng new angular-fontawesome
```

### [<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>](#use-ng-add-to-install-font-awesome)Use `ng add` to install Font Awesome

Angular CLI has a feature to easily add support for external libraries in your project `ng add`. This was introduced in Angular v7.

Simply install the fontawesome Angular component for Angular 15. This would be version **0.12.x**.

Go to your project root and run.

```
ng add @fortawesome/angular-fontawesome@0.12
```

After running this command, you will be prompted:

1. To choose the fontawesome version **Font Awesome 5 or Font Awesome 6**. Choose version 6.
2. The next prompt will be the icon packages you want to use. Choose the packages (SPACE for selecting) confirm with ENTER. The free options are: **Free Solid Icons, Free Regular Icons, Free Brands Icons**.
3. And that's it.

You have **successfully installed Font Awesome**.

### [<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>](#use-npm-i-to-install-font-awesome)Use `npm i` to install Font Awesome

If you use `npm` in your project, and can't use the Angular CLI with `ng add`. You can manually add the packages. Choose directly the packages you want to install.

Go to your project root and install the main package:

```
npm install @fortawesome/angular-fontawesome@0.12
```

Add the icon packages you want to install:

```
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/free-brands-svg-icons
```

To install everything at once:

```
npm install @fortawesome/angular-fontawesome@0.12 @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
```

And that's it. You have **successfully installed Font Awesome** with `npm`.

### [<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>](#use-yarn-add-to-install-font-awesome)Use `yarn add` to install Font Awesome

If you use `yarn` in your project, and can't use the Angular CLI with `ng add`, add the packages manually.

Go to your project root and install the main package:

```
yarn add @fortawesome/angular-fontawesome@0.12
```

Add the icon packages you want to install:

```
yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-brands-svg-icons
```

To install everything at once:

```
yarn add @fortawesome/angular-fontawesome@0.12 @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons
```

And that's it. You have **successfully installed Font Awesome** with `yarn`.

## [<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-add-fontawesome-to-angular-versions-5-to-14)How to add fontawesome to Angular versions 5 to 14?

If you are on a lower version than Angular 15, you have to check the compatibility table to see which version of `@fortawesome/angular-fontawesome` you can use. Installation with the official package is supported from Angular 9 ongoing.

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

Starting from Angular 9 you can use `ng add` to install the package. Otherwise, you have to use `npm` or `yarn` to add the packages.

## [<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>](#install-font-awesome-without-the-official-package)Install Font Awesome without the official package

If you don't want to use the official package, which I don't recommend, you can install Font Awesome directly and update your styles in `angular.json`.

There is a catch. There are two limitations with this approach. The first is the version of Font Awesome - the maximum version is [Font Awesome 4.7](https://www.npmjs.com/package/font-awesome). And, the second is the usage of font-awesome in Angular. You have to use css classes like `<i class="fa fa-dashboard"></i>` to render icons.

### [<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>](#three-steps-to-install-font-awesome-47-in-angular)Three steps to install Font Awesome 4.7 in Angular

1. Install via npm or yarn
2. Update angular.json
3. And that's it.

Install the package. Go to project root and run:

```
npm i font-awesome
```

Add the styles `font-awesome.css` from the fontawesome package to your `angular.json` by updating the `styles` import:

```
{
  "styles": [
    "node_modules/font-awesome/css/font-awesome.css",
    "src/styles.css"
  ]
}
```

And that's it. You have **successfully installed Font Awesome 4.7**.

## [<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

- The preferred way to add Font Awesome to Angular is [Angular Component for Font Awesome 5+](https://www.npmjs.com/package/@fortawesome/angular-fontawesome).
- Use `ng add` for interactive prompts in Angular CLI.
- If the version of Font Awesome should be smaller than 5, install directly via npm or yarn and update styles import in `angular.json`. There are downsides to this approach. The maximum version of Font Awesome is 4.7, and you have to apply CSS classes in Angular to display icons.

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)