Иконка справа на навигационной панели не работает на IOS, как ожидалось

Question

Пример на android/Browser

Прекрасно работает на Android

Пример на Ios

Не работает так же

page.html

<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
    <ion-navbar color="ticket-blue-rainbow" >
        <ion-row>
            <ion-title> {{ evento.descricao }}</ion-title>
            <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
            <ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
            <ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
        </ion-row>
    </ion-navbar>
</ion-header>

page.scss

 .padding-icon {
    padding-right: 15px;
    font-size: 20px;
  }

Answer 1

<ion-header>
  <ion-navbar>

    <ion-title> {{ evento.descricao }}</ion-title>

    <ion-buttons right>
        <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
        <ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
        <ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Answer 2

Нет, если этот метод является наиболее правильным, но в этой ситуации я использую этот класс на ios

.ios {
  page-event
 {
    .padding-ios{
      padding-left:70%!important;
    }
  }
}

и на html я использовал

<ion-buttons right class="padding-ios"> 
</ion-buttons>

Answer 3

Чтобы преодолеть вышеуказанную проблему, вам нужно использовать опцию ниже с тегом <ion-buttons>

<ion-buttons right>
   <ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right 
   (click)="likeEvento()"></ion-icon>
</ion-buttons>

. Он будет работать, и ваши кнопки будут отображаться справа.