调整材质图标的宽度

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>

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

如何为图标提供24px的宽度并实现它在这些24px中居中？

Answer 1

图标的大小由该图标的font-size控制。 如果您想将其移到右侧，可以添加否定的margin。

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