Is it possible to add icons to list headers?


#1

In my list I have a list header which indicates a section, I want to add icons to the list headers, to indicate what a section is about. Does ionic2 allows to add icons to the list header?

I tired to do this way but it doesn’t show up the icon:

  <ion-list-header>
    <ion-icon name="leaf" item-left></ion-icon>
    Herbal Products
  </ion-list-header>
  <ion-item>

    <ion-icon name="leaf" item-left></ion-icon>
    <h2>Neem Paste</h2>


  </ion-item>
    <ion-icon name="ios-aperture" item-left></ion-icon>
    <h2>Aperture</h2>


  </ion-item>

  

</ion-list>

#2

hi @chandroiud, your first try was actually the working one. I just tried it out in one of my sample projects by doing something like this:

<ion-list>
	<ion-list-header>
	    <ion-icon name="leaf" item-left></ion-icon>
	     <h2 style="display: inline-block;">Aperture</h2>
	</ion-list-header>
  <ion-item>
    <ion-icon name="leaf" item-left></ion-icon>
      Herbology
    <ion-icon name="rose" item-right></ion-icon>
  </ion-item>
</ion-list> 

It does work as intended, noted that you should inline-block or have to add another style to the title in the header (else it will block and jump onto the next line).


#3

Thanks!! Its working now. I will make a practise to add an inline-block style to the title from now on.