How can I use a font awesome brand icon in an angular component?

Question

I am trying to use a Font Awesome Brand Icon in my Angular 10 application. I have installed fontawesome and attempted to import it by using:

import { faDiscord } from '@fortawesome/fontawesome-free-brands';

in my component. I have then assigned faDiscord to a property and am trying to use it like this in my html:

<fa-icon [icon]="faDiscord"></fa-icon>

However, my component is now stuck on loading, how can I fix this? Already seen this question: How do i use brand fontawesome icon in angular

Answer 1

First, run the following commands:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/[email protected]

You should change the version number in the last command according to your Angular version. See the docs.

Font Awesome icons are separated into styles, which are shipped in separate packages to meet different needs and to reduce individual packages size. To use an icon you'll need to install a package which contains it.

In your case, you are trying to use an icon which is available inside Brands Style package. Discord Icon

So run the following command: See Here.

npm install @fortawesome/free-brands-svg-icons

Now import FontAwesomeModule in AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your component blabla.components.ts, create a new variable and assign faDiscord to it:

import { Component } from '@angular/core';
import { faDiscord } from '@fortawesome/fontawesome-free-brands';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  faDiscord  = faDiscord;
}

Now in your app.component.html:

<fa-icon [icon]="faDiscord"></fa-icon>

Here is a Stackblitz