在md按钮内的字体真棒图标对齐

Question

我试图在按钮内对齐字体真棒图标,使它们相对于工具栏上的文本居中.我有以下标记;

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

产生以下布局;

fa-lg在第二个图标上使它看起来居中,虽然我怀疑它仍然与顶部对齐.我试着坚持layout-alignment="center center"在md-button没有效果.

如何控制md按钮内部字体真棒图标的对齐方式,具体如何在工具栏中垂直居中？是否有Angular Material方式进行此对齐,或者此处是否需要自定义CSS？

CodePen

Answer 1

它似乎是md-icon元素上的24px固定高度,正在弄乱图标的垂直对齐.FontAwesome图标设计为动态高度,因此强制md-icon元素上的固定高度不兼容; 这个元素的中间不再是图标的中间部分.尝试覆盖它,height: auto;它应该愉快地工作,例如:

md-icon {
  height: auto;
}