CODEWITHSUNDEEP
listionic-frameworkheaderionic4
MaxC
MaxC

Reputation: 945

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

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>

Upvotes: 1

Views: 2845

Answers (2)

Ferdy Fauzi
Ferdy Fauzi

Reputation: 71

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>

Upvotes: 0

Aniruddh Thakor
Aniruddh Thakor

Reputation: 1616

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>

Upvotes: 6

Related Questions