How do I use angular-fontawesome with Angular Material? - angular-material2

Question

Existing questions on this subject refer to how to use Angular with FontAwesome Icons and the Answer is ideally Angular FontAwesome. I searched both repo's and didn't really find much using angular-fontawesome. There are hints of older solutions only.
So I have that. I am also using Angular Material Buttons, to which I have been tasked with using FontAwesome Icons in my Buttons and this leads me to Material Icons
I am not really sure where to begin.
Providing I have added an Icon to angular-fontawesome as described. I have a Button with a Icon ready to go, there is a standard method to use to connect the two?
TLDR: I want to use a Material Icon Button, but I am unable to use a Material Icon and have to use FontAwesome Icons instead. I don't know how to achieve this.

Answer 1

Approach 1: Material icon registry
Material allows to use custom SVG icons with its components (like mat-button). FontAwesome icons are also SVGs, so you can use this mechanism to solve task at hand.
// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
import { icon } from '#fortawesome/fontawesome-svg-core';
// 4. Use with `mat-icon` component in your template
#Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
// 2. Render icon into SVG string
const svg = icon(faFontAwesomeFlag).html.join('');
// 3. Register custom SVG icon in `MatIconRegistry`
registry.addSvgIconLiteral(
'font-awesome',
sanitizer.bypassSecurityTrustHtml(svg)
);
}
}
Also check this issue for description of a more lightweight implementation.
Approach 2: Use fa-icon component from angular-fontawesome library
As you already seem to use #fortawesome/angular-fontawesome package in your application, you can avoid using mat-icon altogether and use fa-icon inside mat-button instead.
import { faFontAwesomeFlag } from '#fortawesome/free-brands-svg-icons';
#Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
faFontAwesomeFlag = faFontAwesomeFlag;
}
Note that you'll also need to add FontAwesomeModule to imports for this to work. See documentation for more details.
Here is the demo with both described approaches: https://stackblitz.com/edit/components-issue-8znrc5
Note that I also had to add some CSS to ensure that icon is aligned well with the button text.

Answer 2

Go to your project directory and run this command to install google material icons pack
npm add material-design-icons.
Next, update the “.angular-cli.json” file to include the web font into the “index.html” page when application gets compiled:
{
styles: [
"./assets/fonts/material-icons/material-icons.css"
]
}
Finally, you can test the font by updating the main application template with something like the following:
<h1>Material Icons</h1>
<i class="material-icons">account_circle</i>
<i class="material-icons">thumb_up</i>
You can refer to this site . I followed all the steps fro this site to use mat-icons when I was creating angular 6 project.
More
You can also checkout this stackblitz
Update
If you want to use font awesome icons I suggest you can start by following this guide . It's super easy and simple to use.
Install font-awesome dependency using the command npm install --save font-awesome angular-font-awesome.
After that import the module :
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }