How to add fontawesome - Angular

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

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+. 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

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.

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.

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.

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.

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

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.

TL;DR

• The preferred way to add Font Awesome to Angular is Angular Component for Font Awesome 5+.
• 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. If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks):Angular,fontawesomeAngular Component for Font Awesome