Stafford Williams Stafford Williams - 4 months ago 49
AngularJS Question

Font Awesome icon alignment inside md-button

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">
<div class="md-toolbar-tools" md-tall"">
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-circle" class="fa"></md-icon>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-circle" class="fa fa-lg"></md-icon>

Which produces the following layout;

Mark above as rendered

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
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?



It appears to be the 24px fixed height on the .md-icon class that is messing with vertical alignment. The FontAwesome icon is a dynamic height, so a fixed height on the element means the middle of the element is no longer the middle of the icon. Try overriding this with height: auto; and it should work happily.