css - 调整 Material 图标的宽度

Question

我将 Angular 与 Angular Material 结合使用，并有一个带有图标和文本的 md 按钮。你可以在这里看到它:

http://jsfiddle.net/opn0zge9

代码:

<md-button layout="row" style="width:80px;" layout-align="center center" ng-href="">
  <div class="material-icons" style="font-size: 36px;">keyboard_arrow_left</div>
  <div translate>Back</div>
</md-button>

图标的宽度为 36px。我希望它更小，例如24 像素。设置元素的宽度 <div class="material-icons">没有帮助，因为图标左侧仍然有相同的大填充。

如何给图标一个 24px 的宽度，并使其在这 24px 内居中？

Answer 1

图标的大小由该图标的font-size 控制。如果你想把它移到右边，你可以添加负的 margin。

.material-icons {
    margin-right: -10px;
}