简体   繁体   中英

ionic 5 button with text + icon, flush icon on the side

Here's the button:

<ion-footer>
  <ion-button class="m-0" (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>

How to flush the icon, in a button with text and icon, completely on the right?

在此处输入图像描述

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

Adding 'ion-float-right' class to the icon should do the trick

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM