Angular Material 2 - 如何在按钮内修复损坏的图标对齐？

Question

我试图用angular2-material制作一些按钮。这是代码：

<md-card>
<button md-icon-button>
  <md-icon class="md-24">favorite</md-icon>
</button>
<button md-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<button md-mini-fab>
  <md-icon class="md-24">add</md-icon>
</button>

产生以下输出：

它应该可以正常工作而无需任何额外的操作，但它没有（如你所见，图标放在按钮的底部）。关于这有什么问题的任何想法？我没有任何影响这些按钮的CSS样式。

Answer 1

问题是你在每个图标上使用不同的 md-fab ，如果你想让它统一设置md-fab到所有三个

<md-card md-fab> 
<button md-icon-button>
  <md-icon class="md-24">favorite</md-icon>
</button>
<button md-fab>
  <md-icon class="md-24">add</md-icon>
</button>
<button md-fab>
  <md-icon class="md-24">add</md-icon>
</button>