Ion-item with icon, text and toggle


#1

Hello there,
I try to set up a list, where each item consists of the 3 elements icon, text and toggle.
Basicly exact the same as shown here: https://ionicframework.com/docs/components/#icon-list

But i dont get it to work.
This is my style:

<ion-list>
    <ion-item-divider color="light">General settings</ion-item-divider>
      <ion-item>
        <ion-icon name="notifications" item-left></ion-icon>
          Push notifications
        <ion-toggle [(ngModel)]="push_notifications"></ion-toggle>
      </ion-item>
      <ion-item>
        <ion-icon name="leaf" item-left></ion-icon>
          Herbology
        <ion-icon name="rose" item-right></ion-icon>
      </ion-item>
  </ion-list>

The second item works just fine, but in the first item i only see the icon and the toggle, but the text is gone.
Here is a screenshot for a better view:

Anyone can tell me, what i am doing wrong?

Thank you
Skee


#2

maybe

 <ion-label>Push notifications</ion-label>
 <ion-toggle [(ngModel)]="push_notifications"></ion-toggle>

#3

Awesome!
If i do it like this, it worls just fine :slight_smile:

<ion-icon name="notifications" item-left></ion-icon>
<ion-label>Push notifications</ion-label>
<ion-toggle [(ngModel)]="push_notifications"></ion-toggle>

Thank you!