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

  • AngularJS Material using $mdDialog in a directive linking function
  • Binding Angular Material Design Checkboxes to an Array in Controller
  • Angular Ui Router not loading view when accessing url [material-ui + tabs]
  • Angular, material form only say field is required after submit attempt
  • What is the best approach when creating a custom angular material theme?
  • Radiobutton wont react to ng-change directive
  • Mark above as rendered

    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

  • How to create a simple search input text in AngularJS material design?
  • Error: [$compile:multidir] Multiple directives [mdVirtualRepeat, ngInclude] asking for transclusion
  • Virtual Repeater and Protractor
  • angular.js - parse html function is taking 2000ms and much more
  • How to display text without truncation in <input> tag, which is created by a framework
  • Show progress circular during $http post?
  • 4 Solutions collect form web for “Font Awesome icon alignment inside md-button”

    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.

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

    Try this css

    .md-icon-button .fa-circle {
      font-size: 23px;
      width: auto;
    }
    

    I have checked the latest release of Angular Material (1.1.1) and this problem has gone. Enjoy!