Angular 材质图标按钮格式

Question

这个问题有一个Stackblitz 演示； 给定以下Angular材质按钮

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

堆栈闪电战：-

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

Answer 2

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

这在语义上更合适。

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