在离子按钮文本旁边定位图标

Question

我需要在按钮文本旁边放置复选标记图标。 取决于是否单击按钮，将在点击事件中显示/隐藏图标。 我设法把它放在里面并显示或隐藏它点击但是当我显示它时，图标向左推动按钮文本。并且按钮文本应该固定在按钮的中间，并且复选标记图标应该出现在空白区域，而不会将按钮文本稍微向左推。

这应该是这样的：

这就是我到目前为止所得到的：

如您所见，＆＃34; 02：00 AM＆＃34;被推到左边，它不应该是。

    <button ion-button [color]="i.active
        ? 'primary'
        : 'light'
      "
        block
        (click)="onToggleReminder(i)">
        <span>
          {{i.label}}
        </span>
        <ion-icon name="checkmark" float-right [hidden]="!i.active"></ion-icon>
      </button>


     .button {
        border-radius: 16px;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: bold;
        height: 45px;
     }
     span {
        margin-right: 5px;
     }

Answer 1

嗯，我认为很明显这个图标的大小不同。也许试着让它变小？

Answer 2

问题是默认情况下图标有一些宽度，因为它是向左按下按钮文本。因此解决方案是我指定图标的宽度为1px，这足以将其放在按钮文本旁边，而不会将其向左推，仍然可以显示图标。

    ion-icon {
      width: 1px;
    }