Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use with angular material button #198

Open
vishnu-dev opened this issue Nov 4, 2019 · 3 comments
Open

Use with angular material button #198

vishnu-dev opened this issue Nov 4, 2019 · 3 comments

Comments

@vishnu-dev
Copy link

Describe the problem

I used angular fontawesome with mat-icon-button from Angular Material. Any other size other than default is having an offset.

<button mat-icon-button color="primary">
     <fa-icon [icon]="userIcon" size="2x"></fa-icon>
 </button>

Current Size: 2x

image

image

Other icon on the left(Moon) is Material Design Icon. Which has proper alignment.

What did you expect?

I want it centre aligned inside button by default.

Reproducible test case

https://stackblitz.com/edit/angular-z8v4ux

@devoto13
Copy link
Collaborator

devoto13 commented Nov 4, 2019

It seems to me, like the fa-icon component behaviour is correct here. It just that Material icon and button are well integrated together, while Material button and fa-icon are not, so you'll need to apply some custom CSS to make them play well with each other.

When you set size="2x" it means base font at the location of icon times 2. Material button has a hard-coded height of 40px, while base font size inside it is 14px. As a result 2x fa-icon
ends up with a box being 28px height, which is obviously not vertically aligned inside button with 40px height.

What you can do is either compensate 12px gap using paddings or adjust base font size to be 20px, so icon is 40px high and takes all the height of the Material button. You may also want to add vertical-align: unset to fa-icon to achieve perfectly vertically centred icon as by default fa-icon will try to align with the text base line and is a bit shifted to the bottom.

See the StackBlitz.

I'll think if there is anything we can do in angular-fontawesome to make the integration more straight-forward.

@blogcraft
Copy link

I still have a problem with fa-icon and mat-icon-button in the latest version of angular material

@Frosty1604
Copy link

@blogcraft see here: #450 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants