Как сделать так, чтобы значок и текст располагались рядом друг с другом в ионной ионной сегментной кнопке с помощью CSS?

Question

Я пытаюсь получить значок и текст рядом с кнопкой ионного сегмента. Я пытаюсь вспомнить текст слева, но это не работает.

В настоящее время я использую метод float one div, есть ли другие способы, которые я могу попробовать?

это изображение, которое я сейчас получаю в виде.

Но я хочу достичь чего-то в этом духе, когда текст находится рядом с изображением.

HTML

 <ion-toolbar style="width: 100% !important" color="medium">
<ion-segment (ionChange)= "segmentChanged()" [(ngModel)]="segment" color="dark">
  <ion-segment-button value = "0">
    <ion-icon id ="heart" name="heart"></ion-icon><p id="Wipped">Wipped</p>
  </ion-segment-button>
  <ion-segment-button value="1">
    <ion-icon name="heart-half"></ion-icon><p id="Wipping">Wipping</p>
  </ion-segment-button>
</ion-segment>
</ion-toolbar>

SCSS

ion-segment-button {
    border: 1px solid black;
    overflow: hidden !important;
}


#Wipped {
  width: 300px !important;
  float:left !important;
  border: 1px solid red !important;
}

#heart {
  border: 1px solid green !important;
  overflow: hidden !important;
}

Answer 1

попробуйте это: -

<ion-toolbar style="width: 100% !important" color="medium">
<ion-segment (ionChange)= "segmentChanged()" [(ngModel)]="segment" color="dark">
  <ion-segment-button value = "0" layout="icon-start">
    <ion-icon id ="heart" name="heart"></ion-icon><p id="Wipped">Wipped</p>
  </ion-segment-button>
  <ion-segment-button value="1" layout="icon-start">
    <ion-icon name="heart-half"></ion-icon><p id="Wipping">Wipping</p>
  </ion-segment-button>
</ion-segment>
</ion-toolbar>

добавить только ion-segment-button с layout="icon-start"