Ionic ion-list-header with icon. Is it possible?

1
votes

I'm trying to add an icon to ionic ion-list-header element in order to manage list item addition.

I tried the following code and it doesn't work. I start believing this is not admitted, but it looks quite silly at my eyes that it is not possible to add icons to a list header.

I appreciate your help. Thanks in advance.

<ion-list-header color="primary">
  <ion-icon name="add" slot="end"></ion-icon>
  <ion-label>Header text</ion-label>
</ion-list-header>
2
listionic-frameworkheaderionic4

2 Answers

4
votes

Yes it is possible just put you icon and label in ion-item like this.

 <ion-list-header color="primary">
    <ion-item>
      <ion-icon name="add" slot="end"></ion-icon>
      <ion-label>Header text</ion-label>
    </ion-item>
 </ion-list-header>
0
votes

For list-header, We can add an icon inside a button. Example:

<ion-list-header>
   <ion-label>Header text</ion-label>
   <ion-button>
      <ion-icon name="add"></ion-icon>
   </ion-button>
</ion-list-header>