Icon placement in ion-item-divider?

Ionic Framework ionic-v3
1

placing icons inside <ion-item-dividers/> is not supported in IONIC2 - unfortunately.
The same issue exists in IONIC 1.x: Ion-list item-divider icon placement?
Any plans to make it work in IONIC 2?

2

There is an open issue for this, unfortunately we haven’t agreed on a good solution yet. Here is the issue:

In the meantime, you could add the ion-item attribute and override the styles. Something like this:

  <ion-item-divider ion-item light no-lines style="font-size: 1.4rem">
    Item Divider
    <ion-icon item-right name="heart"></ion-icon>
  </ion-item-divider>

which will result in something like this:

image
Screen Shot 2016-04-27 at 7.12.17 PM.png652×604 16.5 KB

2 Likes
3

Who knows how to do same thing at Ionic 5?

4

I found it.

<ion-item-divider>
  Item divider
 <div slot="end" class="ion-padding"><ion-icon slot="icon-only" name="heart"></ion-icon> </div>
</ion-item-divider>
1 Like