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

M Fuat · Accepted Answer · 2020-08-23T15:34:38.280

7

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

edited Aug 23 '20 at 15:34

answered Aug 22 '20 at 16:31

M Fuat

1,330
3
12
24

For some reason my app gets stuck on loading :( – kalek Aug 22 '20 at 16:37
1

Have you added `FontAwesomeModule` to your app module ? – M Fuat Aug 22 '20 at 16:37
Where would that be imported from? – kalek Aug 22 '20 at 16:39
1

in your app.module.ts file, add `FontAwesomeModule ` to the import part. imports: [ BrowserModule, FontAwesomeModule ], – M Fuat Aug 22 '20 at 16:41
1

https://github.com/FortAwesome/angular-fontawesome#usage – M Fuat Aug 22 '20 at 16:41
I think Ive got my imports all messed up, my app module is looking like this – kalek Aug 22 '20 at 16:47
1

What is your Angular version? – M Fuat Aug 22 '20 at 16:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/220272/discussion-between-kalek-and-m-fuat-nuroglu). – kalek Aug 22 '20 at 16:50
1

Please, Can you accept my answer if it was helpful? – M Fuat Aug 22 '20 at 19:56

score 1 · Answer 2 · answered Sep 13 '22 at 14:19

I found the solution provided by angular-fontawesome has limits when I worked with CMS that renders the SVG icons dynamically based on the content.
There was no way to import these icon in advance.
I came up with another way to render SVG FontAwesome

    <fa-svg prefix="far|fas|fab"
        name="..."
        title="Text to show when hovered"
        alt="Text alternative for screen reader"
        cssClass="..."
        shrink="8"
        grow="16"
        up="32"
        down="32"
        left="16"
        right="16"
        rotate="45"
        flip="horizontal|vertical|both"
        animation="pulse|spin"
        inversed="true"
        maskPrefix="far|fas|fab"
        maskName="..."></fa-svg>

This library can render both (FontAwesome 5) WebFont and SVG icons with Angular

https://www.npmjs.com/package/@ui4ngx/fontawesome

Demo

This uses HTML templates instead of Javascript rendering.
It provides the same features as angular-fontawesome library does

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

2 Answers2