角度材质图标按钮格式

Question

这个问题有一个Stackblitz demo；鉴于以下Angular Material button

<button md-button>
  <span>Foo</span>
  <md-icon>keyboard_arrow_down</md-icon>
</button>

如何增加Foo和图标之间的距离（见下文）：

我认为这很容易，但是Angular Material将内容包装在<span class="mat-button-wrapper">中，因此最终标记更像是：

<button>
  <span class="mat-button-wrapper">
    <span>Foo</span>
    <mat-icon>keyboard_arrow_down</mat-icon>
  </span>
</button>

到目前为止，我已经添加了以下CSS以使包装器填充可用空间，但我看不到如何进行：

.mat-button-wrapper {
  display: inline-block;
  width: 100%;
}

Answer 1

.mat-button-wrapper > span {
  margin-right: 2em;
}

Stackblitz：-

https://stackblitz.com/edit/angular-material-6z4j4m

Answer 2

button md-icon {
  margin-left: 64px;
}

这在语义上更合适。

https://stackblitz.com/edit/angular-material-yvqvhm