Mat-icon smaller when used with font-awesome in Angular

2
votes

I'm trying to use Font-awesome for my <mat-icon> and they appear smaller.

enter image description here

<li>
  <mat-icon>remove_red_eye</mat-icon>
  <mat-icon>brush</mat-icon>
  <mat-icon fontSet="fa" fontIcon="fa-filter"></mat-icon>
</li>

I have added "node_modules/font-awesome/scss/font-awesome.scss" in the styles array of angular.json (downloaded from npm) and... that's all. I'm pretty sure it's because I don't use the matIconRegistry but I didn't find how this works to "import" a whole set of icons (all the Font-awesome icons).

Thanks for your help

2
angulariconsangular-materialfont-awesome

2 Answers

0
votes

This worked for me!

<mat-icon fontSet="fa" style="font-size: 2em; color: green;" fontIcon="fa-file-csv"></mat-icon>
0
votes

Add css class

.mat-icon {
    font-size:24px; //or desired size
}

This is because mat-icon default defines the size of the icon via css styles width: 24px; height: 24px;.

When using font-awesome, the font-awesome icon (font) is injected into the mat-icon component which has a width and height of 24px, but the actual font-size of font-awesome may be smaller. Therefore, add font-size:24px to match the width and height of the font-awesome icon to the mat-icon width & height.