CODEWITHSUNDEEP
angularangular-materialiconsfont-awesome
James Mak
James Mak

Reputation: 120

Font Awesome Icons not rendering in Material Dialog

I am having a strange issue where I can't use fontawesome icons with the Material Popup Dialog component.

The first step I tried was to get rid of everything within the dialog and simply pasted in the code for the icon I wanted.

<mat-icon fontSet="fontawesome" fontIcon="fa-image"></mat-icon>

That did not work. However this is the same exact code that I am using in the component that calls this dialog. I fact the dialog is called by clicking on the icon.

Therefore it seems to me that the issue is specific to just the popup dialog. Is this an angular issue or a material issue? I am not sure what else to do to fix this problem.

Also keep in mind that I have fontawesome v4.7.0 installed and that I am using Angular CLI. I have @import '~font-awesome/css/font-awesome.min.css'; in the styles.scss

I also have the constructor set up in my app.component.ts as specified in the material documentation.

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

I also have my component that is supposed to be embedded in the popup dialog declared in my entryComponents in my app.module.ts as requested by material documentation.

Here is a link to material docs

Upvotes: 2

Views: 2033

Answers (1)

Haifeng Zhang
Haifeng Zhang

Reputation: 31895

Try change fontSet="fontawesome" to:

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

I assume you imported MatIconModule already, just in case because you didn't mention it.

Upvotes: 1

Related Questions