角度材质图标按钮格式

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%;
}
评论
一纸离人醉
一纸离人醉
.mat-button-wrapper > span {
  margin-right: 2em;
}

Stackblitz:-

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

点赞
评论