Font Awesome icon alignment inside md-button

Question

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

Solution 1

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;
}

Solution 2

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;
}

Comments

[AsGoodAsItGets]

And I have checked again now (November 2018) , Angular Material 7.0.4 and it's again there... :(

[AsGoodAsItGets]

For Angular Material 7.0.4, (latest in November 2018), this did it for me: button .mat-icon { height: auto; }