I'm trying to align font awesome icons inside a button so that they are centered in respect to text on a toolbar. I have the following markup;
<div ng-app="app">
<md-toolbar>
<div class="md-toolbar-tools" md-tall"">
<h2>
<span>Icons</span>
</h2>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-circle" class="fa"></md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon>
</md-button>
</div>
</md-toolbar>
</div>
Which produces the following layout;
fa-lg
on the second icon makes it look centred although I suspect it is still aligned to the top. I tried sticking layout-alignment="center center"
on the md-button
to no effect.
How can I control the alignment of font awesome icons inside md-buttons and, specifically how can I vertically center these within the toolbar? Is there a Angular Material way of doing this alignment, or is custom CSS required here?
CodePen
It appears to be the 24px fixed height on the md-icon
element that is messing with icon's vertical alignment. The FontAwesome icon is designed with a dynamic height, so forcing a fixed height on the md-icon
element isn't compatible; the middle of this element is no longer the middle of the icon. Try overriding this with height: auto;
and it should work happily, e.g.:
md-icon {
height: auto;
}
The height added for md-icon is causing the issue
md-icon {
height: 24px;
}
You need to add some extra class like follows
<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon>
and need to override the height
.fa-md {
height: auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With