[Angular] fontawesome or ng-fontawesome

[Stefano Bettica]

Hello everybody,

I'm learning angular. 

I did a small project in Angular 5 to train my self. 

I installed via npm fontawesome 4, and used them the old way with i tag: <i class="fa fa-user-plus"></i>

<i class="fa fa-repeat"></i>

Few weeks after Angular 6 has been released.

I update deverything and strated new project

I discovered fontawesome was updated to version 5, and found there was a ng version of npm for angular

now, according to the instructions and examples found in the github page, things are quite more complex:

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

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserPlus, faUserCheck, faRedo } from '@fortawesome/free-solid-svg-icons';

import { faEdit, faTrashAlt, faCheckCircle, faCalendarPlus, faCalendar, faCalendarCheck } from '@fortawesome/free-regular-svg-icons';

library.add(faEdit, faTrashAlt, faCheckCircle, faUserPlus, faUserCheck, faRedo, faCalendar, faCalendarPlus, faCalendarCheck)

and then use the fa-icon tahg in the htmls

<fa-icon [icon]="['far', 'calendar-plus']"></fa-icon>

so i have now to import modules, and add to my library all the icons i want to use

everytime i want a new icon while designing a page, i also have to go to appmodule.ts and import the icon and add to library

Am I doing something wrong?

Didn't i understand well how to implement and use this library?

Or are there advantages from following this way that I am not seeing and cope the extra complexity of coding?

Thanks all in advance for answers

[Sander Elias]

Hi Stefano,

You can keep using the Fontawsome in the same way as you are used to. Just pull the css font from the CDN and you are good to go.

However, using the Angular package (or the plain JS version) you can pull in the icon that you actually use, and have a smaller payload.

Depending on your requirements, this might be a good option.

Regards

Sander