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

Answer 2

为md-icon添加的高度导致问题

md-icon {    
    height: 24px;    
}

您需要添加一些额外课程，如下所示

<md-icon md-font-icon="fa-circle" class="fa **fa-md**"></md-icon>

需要覆盖高度

.fa-md {
    height: auto;
}

Answer 3

试试这个css

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

Answer 4

我检查了最新版本的Angular Material（1.1.1），这个问题已经消失了。享受！