角度材质图标按钮格式

由 发布于

This question has a Stackblitz demo; Given the following Angular Material button

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

How can I increase the gap between Foo and the icon (see below):

enter image description here

I thought this would be easy but Angular Material wraps the contents in <span class="mat-button-wrapper"> so the final markup is more like:

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