Ionic5 带文本和图标的按钮如何将图标完全对齐到最右侧

解决方法 #

你当前代码里slot="end"仅代表图标放在文本的末尾位置，而ion-button默认内部内容整体居中对齐，因此图标只会跟在文本后方，无法贴到按钮最右侧，可通过以下方案实现需求：

方案1：无需修改HTML结构，仅新增样式（兼容性最优）

直接使用Ionic官方暴露的CSS自定义属性调整按钮内部对齐规则，给ion-button新增自定义类btn-icon-right即可：
修改后的HTML代码：

<ion-footer>
  <ion-button class="m-0 btn-icon-right" (click)="calcVolume()" expand="full" color="primary">
    {{'discover_my_recommended_volume'|translate}}
    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
  </ion-button>
</ion-footer>

对应CSS样式：

/* 场景1：文本左对齐，图标完全靠右 */
.btn-icon-right {
  --justify-content: space-between;
}

/* 场景2：文本保持居中，图标完全靠右，用下面的样式替换上面的即可 */
/*
.btn-icon-right {
  --justify-content: center;
}
.btn-icon-right ion-icon[slot="end"] {
  margin-left: auto;
}
*/

如果是Angular项目中组件内样式不生效，可将样式写到全局global.scss文件中，或者在类名前添加::ng-deep前缀即可。

效果参考：

内容的提问来源于stack exchange，提问作者Louis