CODEWITHSUNDEEP
angularfont-awesomefont-awesome-5angular-fontawesome
kalek
kalek

Reputation: 51

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

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

Upvotes: 0

Views: 2639

Answers (2)

Tuyen Tran
Tuyen Tran

Reputation: 11

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

Upvotes: 1

M Fuat
M Fuat

Reputation: 1440

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

enter image description here

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

Upvotes: 7

Related Questions