将图标与按钮的末尾对齐

Question

您能告诉我在按钮末尾放置图标的正确方法吗？请参阅下面我的代码：

html

<mat-grid-list cols="1" rowHeight="100px">
    <mat-grid-tile [colspan]="1" [rowspan]="1" >
        <div>
            <button mat-raised-button color="primary" flex class="expanded-button" style="text-align: left" [matMenuTriggerFor]="userprofile">
            <span>User Profile</span><mat-icon matSuffix style="float: right; position: relative;">chevron_right</mat-icon>
            </button>
        </div>

        <mat-menu #userprofile="matMenu" xPosition="before">
            <button mat-menu-item>View Profile</button>
            <button mat-menu-item >Change Password</button>
        </mat-menu>
    </mat-grid-tile>
</mat-grid-list>

CSS

.expanded-button {
    display: block;
    width: 190px;
}

.icon-in-menu {
    position: relative;
    margin-right: 5px;
}

通过上面的代码，这就是我得到的：

箭头未与文本对齐。你能帮忙吗？谢谢。

Answer 1

Angular Material 现在支持图标对齐：

<button mat-raised-button>
   <mat-icon iconPositionEnd>add</mat-icon> 
   Hello
</button>

一个很晚的答案但值得一提。

Answer 2

也许只需查看您的代码并稍微简化一下即可。

希望这对您有所帮助：

<button class="some-button">
  <span class="some-text">User Profile</span>
  <i class="some-icon">><i>
</button>

.some-button {
  width: 200px;
  height: 50px;
}

.some-text {
  float: left;
  margin-left: 10px;
}

.some-icon {
  float: right;
  margin-right: 10px;
}

https://codepen.io/anon/pen/jxQJjE