Htykuut

I am new to Angular, so bear with me.
I am trying to use FontAwesome in my project. Initially I had it loaded via CDN, but I want to use it properly.
So I have imported the FontAwesomeModule into my WidgetModule. Which looks like this:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';



import { WidgetRoutingModule } from './widget-routing.module';

import { SharedModule } from '@pyb-shared/shared.module';

import { WidgetComponent } from './widget.component';

import { ScenariosComponent } from './scenarios/scenarios.component';

import { QuestionsComponent } from './questions/questions.component';

import { AnswersComponent } from './answers/answers.component';

import { ResultsComponent } from './results/results.component';



import { AnswerButtonComponent } from './shared/answer-button/answer-button.component';

import { HeaderComponent } from './shared/header/header.component';

import { LoadingButtonComponent } from './shared/loading-button/loading-button.component';

import { MainProductComponent } from './shared/main-product/main-product.component';

import { MatchesComponent } from './shared/matches/matches.component';

import { ProductComponent } from './shared/product/product.component';

import { QuestionSplitComponent } from './shared/question-split/question-split.component';



import { AnswersService } from './answers/answers.service';

import { QuestionsService } from './questions/questions.service';

import { ResultsService } from './results/results.service';

import { ScenariosService } from './scenarios/scenarios.service';



import { AnswerMatchService } from './shared/answer-match.service';

import { DuplicateService } from './shared/duplicate.service';

import { FilterService } from './shared/filter.service';

import { FormulaService } from './shared/formula.service';

import { MatchesService } from './shared/matches.service';

import { PickService } from './shared/pick.service';

import { QuestionSplitService } from './shared/question-split/question-split.service';

import { StateService } from './shared/state.service';

import { WidgetService } from './widget.service';



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

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

import { faSquare, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';



@NgModule({

  imports: [

    CommonModule,

    WidgetRoutingModule,

    SharedModule,

    FontAwesomeModule

  ],

  declarations: [

    WidgetComponent,

    ScenariosComponent,

    QuestionsComponent,

    AnswersComponent,

    ResultsComponent,



    AnswerButtonComponent,

    HeaderComponent,

    LoadingButtonComponent,

    MainProductComponent,

    MatchesComponent,

    ProductComponent,

    QuestionSplitComponent

  ],

  providers: [

    AnswersService,

    QuestionsService,

    ResultsService,

    ScenariosService,



    AnswerMatchService,

    DuplicateService,

    FilterService,

    FormulaService,

    MatchesService,

    PickService,

    QuestionSplitService,

    StateService,

    WidgetService

  ]

})

export class WidgetModule {

  constructor() {

    console.log('WidgetModule loaded.');

    library.add(faSquare, faCheckSquare);

  }

}

I want to show two icons on my component, so you can see in the module above I have added faSquare and faCheckSquare.
In my component (which is called ScenariosComponent), I just have this span:

<span class="fas fa-square"></span>

From the link I provided above, and looking at this:

https://github.com/FortAwesome/angular-fontawesome

It looks like it should work.
I have the FontAwesomeModule imported, the ScenariosComponent has the WidgetModule as its parent module, so it should just work.
According to this line:

Icons added to the library will be available to any other component whose parent module also imports FontAwesomeModule.

And I do have my library set up in my module. Which should work within that module, at least in my understanding.

Am I doing this right?

If you want to use angular-fontawesome, you'll have to follow their guide. There are a few issues with your implementation.

The first issue is here:

import { faSquare, faCheckSquare } from '@fortawesome/pro-solid-svg-icons';

You're importing from @fortawesome/pro-solid-svg-icons which is a pro version of FortAwesome.

You should have imported from @fortawesome/free-solid-svg-icons instead:

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

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

import { faSquare, faCheckSquare } from '@fortawesome/free-solid-svg-icons';

Then in your AppModule:

export class AppModule {

  constructor() {

    library.add(faSquare, faCheckSquare);

  }

}

The second issue is, from the Guide for angular-fontawesome, it seems that you'll have to use it as a Component: fa-icon which has an @Input property [icon] to which you'll have to supply the name of the class(es) you want to apply to them.

Something like this:

<div style="text-align:center">

  <fa-icon [icon]="['fas', 'square']"></fa-icon>

  <br>

  <fa-icon [icon]="['fas', 'check-square']"></fa-icon>

</div>

Here's a Sample StackBlitz for your ref.