html - Ionic v3 对齐按钮和图标

Question

在 ionic creator(v3) 上创建按钮时我可以创建一个像这样的按钮

但是当我导出模板时，它会像这样呈现:

这是我的 HTML:

<button ion-button icon-end block color="energized">
      <span>Edit</span>
      <ion-icon name="create"></ion-icon>
</button>

如何正确对齐按钮和图标，使图标位于末尾且按钮文本居中。有没有一种内置的方法可以使用 ionic 指令来做到这一点？或者我是否必须创建自定义 CSS 才能实现此目的？

Answer 1

从CSS中，您可以添加

button ion-icon {
    position: absolute;
    right: 20px;
}

选择器可以是button[icon-end][block] ion-icon{...}