This is actually my first how to do post, so let’s enjoy it together.

If you are a familiar with Font Awesome and also work with Ionic framework and you are curious on how to use Font Awesome in Ionic 5 Angular Version, then this is for you.

Lets dive into it……..

Let’s create a new ionic project

$ ionic start awesomeIonic --type=angular

Select the blank starter template

$ ionic serve

To start app

For curiosity sake, I will post my ionic info at the bottom of the page

Let’s dive in more by bringing the font awesome dependencies into our project

$ npm install @fortawesome/fontawesome-svg-core
$ npm install @fortawesome/angular-fontawesome
$ npm install @fortawesome/free-solid-svg-icons
$ npm install @fortawesome/free-regular-svg-icons
$ npm install @fortawesome/free-brands-svg-icons

installing font awesome dependencies

Now let’s perform how little magic

app.module.ts

import { FontAwesomeModule, FaIconLibrary } from ‘@fortawesome/angular-fontawesome’;
import { fas } from ‘@fortawesome/free-solid-svg-icons’;
import { far } from ‘@fortawesome/free-regular-svg-icons’;
import { fab } from ‘@fortawesome/free-brands-svg-icons’;

Add FontAwesomeModule to the imports array

Add a constructor to your AppModule class

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

Your app.module.ts should look like this

app.module.ts

So lets implement it in our page, which mine is called TestPage

test.module.ts

Just like we did in the app.module we will the FontAwesomeModule then add to the imports.

import { FontAwesomeModule } from ‘@fortawesome/angular-fontawesome’;

It should look like this

test.module.ts

Now lets add the component to the test.page.html

Please note, cause this was my initial mistake too. It’s a component not just any HTML element

test.page.html

<fa-icon icon="spinner"></fa-icon><!-- Solid Icons -->
<fa-icon [icon]="['fas', 'square']"></fa-icon><!-- Regular Icons -->
<fa-icon [icon]="['far', 'square']"></fa-icon><!-- Brand Icons -->
<fa-icon [icon]="['fab', 'stack-overflow']"></fa-icon>

See Font Awesome Icon Gallery for more icon.

Your HTML code should look like this

test.page.html

Let’s see our final product

output

Ignore the nasty app LOL

Access the complete code here

Follow me on Twitter/Medium @iamserverr

I will be dropping the VueJS and ReactJS version soon.

As promised —** My ionic info**

Ionic:
Ionic CLI                     : 6.3.0 (/Users/macbook/.nvm/versions/node/v11.15.0/lib/node_modules/@ionic/cli)Ionic Framework               : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics    : 8.3.26
@angular/cli                  : 8.3.26
@ionic/angular-toolkit        : 2.2.0Utility:
cordova-res (update available: 0.12.1) : 0.12.0
native-run (update available: 1.0.0)   : 0.2.8System:
NodeJS : v11.15.0 (/Users/macbook/.nvm/versions/node/v11.15.0/bin/node)
npm    : 6.14.2
OS     : macOS High Sierra