# 角度材质图标按钮格式

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):

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>
``````

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

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

Stackblitz：-

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