Font awesome is not aligned properly with md-icon

[oshri551]

Bug : Looks like the font awesome is not working well with md-icon

What is the expected behavior? icon should be aligned with the text

Plunker template: Plunekr

[fxck]

md-icon does not work with any icon font out there, that's obvious, so it's expected behaviour and it's up to you to align it

[jelbourn]

We should look at this to make sure we're not doing anything weird

[thekalinga]

@fxck It should with font awesome if its claiming to work with custom fonts

[thekalinga]

I tried with https://cdn.materialdesignicons.com/1.9.32/ aswell & its not aligning with md-icon (My assumption is that this custom font(mdi, not stick material icons) to be compatible with material design)

[fxck]

You can't optimize it for ALL custom fonts, there's no standard to icons fonts AFAIK.

[thekalinga]

Agreed, but would you mind specifying what its compatible with other than stock material icons?

[thekalinga]

With material design icons (mdi, not stock material icons), the icon gets displayed but not of the right size & not at the center of the button.

Also the documentation of md-icon hints at working with fontswesome.

So, defining the constraints under which this component works with custom fonts would help the users of the component.

Thanks in anycase

[willshowell]

1. .mat-icon class has its height and width set to 24px

2. This (I assume) is done because materical icons have a default font-size of 24px. This default is set by the .material-icons class via the icon font.

3. Font awesome defaults its icons to 14px font-size

I think either .mat-icon should also set the default font-size to be the same as its height and width OR there should be a brief not in the icon docs about users needing to properly size and position their icons based on their needs

[thekalinga]

I tried with mdi aswell. They use 24px as default font size. Even there I have alignment issue.

The rendered icon has correct size, but not aligning properly within md-icon area (I set the icon size to 48px).

So, its better to include an examples with custom font that's compatible with material design (not stock icons) & the ones that are not material compatible.

[willshowell]

@thekalinga Just to be sure, when you set the icon size to 48px and it was still poorly aligned, did you make the font-size, height, and width all the same?

If so, would you mind showing a plunker with mdi?

[thekalinga]

I am unable to create plnkr as the template on the project seems to be broken

I am getting the following error while loading the template. Must be something to do with the recent refactoring w.r.t cdk

Error: (SystemJS) XHR error (404 Not Found) loading http://run.plnkr.co/97mvjrOYfdkUFSc7/@angular/cdk.ts

[thekalinga]

Please check here

https://plnkr.co/edit/VJN3SD68kmQHQvLUZICW?p=preview