CODEWITHSUNDEEP
angularangular-materialfont-awesome
AppDreamer
AppDreamer

Reputation: 1426

How to use matIconRegistry and fontawesome for facebook icon?

I know there are several ways to do this, but I'm attempting to follow the directions here...

https://material.angular.io/components/icon/examples

I have this in my app.module.ts…

import { MatIconModule, MatIconRegistry } from '@angular/material/icon';

  imports: [
    MatIconModule,

  providers: [
    MatIconRegistry,

and in the particular module ts…

import { MatIconRegistry } from '@angular/material/icon';


constructor(public matIconRegistry: MatIconRegistry ) {
              matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
               }

why is it that this line of code works...

    <mat-icon fontSet="fa" fontIcon="fa-times-circle" class="facebook-icon"></mat-icon>

while this line of code fails?

    <mat-icon fontSet="fa" svgIcon="fa-facebook-square" class="facebook-icon"></mat-icon>

they are both free. Is it somehow that the facebook icon isn't in the standard 'fontawesome' library as declared above? Or is there something else I am missing?

Upvotes: 0

Views: 5010

Answers (1)

AppDreamer
AppDreamer

Reputation: 1426

Finally figured it out! As I suspected when I said, "Is it somehow that the facebook icon isn't in the standard 'fontawesome' library as declared above? Or is there something else I am missing?"

At the end of your constructor, you put this code...

..., public matIconRegistry: MatIconRegistry ) 
              {
                matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
              }

I was looking in my looking in my angular.json file, and spied the following...

    "styles": [
      "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
      "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
      "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
      "node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
      "src/styles.scss"
    ],

Aha! there are multiple sets of libraries and one is named "fontawesome"... on a whim, I tried the following addition to my constructor...

..., public matIconRegistry: MatIconRegistry ) 
              {
                matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
                matIconRegistry.registerFontClassAlias('brands', 'fab');}

              }

Then, when I use the icon, I add the "b" to the "fa"...

    <mat-icon fontSet="fab" fontIcon="fa-facebook-square" class="facebook-icon"></mat-icon>

Yay! now it works. You can register any other library you may need. By the way, there's a hint for the right library when you look at the font awesome page for a specific icon. Look on the upper left, just below the icon name, you will see something like this: "Brands Style".

Upvotes: 1

Related Questions