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
First, run the following commands:
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome@0.7.0
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