angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

Font awesome is not aligned properly with md-icon #5102

Open oshri551 opened 7 years ago

oshri551 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

thekalinga commented 7 years ago

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

thekalinga commented 7 years ago

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 commented 7 years ago

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

thekalinga commented 7 years ago

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

thekalinga commented 7 years ago

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 commented 7 years ago
  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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

Please check here

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