Ion-list item-divider icon placement?

ionic-v1
1

is there support for having an icon right justified in an ion-item that’s a divider?

<ion-list>
  <ion-item class="item-divider">
      Notes
     <i class="ion-plus-circled" ng-click="addNote()"></i> 
  </ion-item> 
</ion-list>

The code above produces the Notes text with an icon, but it’s not right justified. I tried adding item-icon-right as a class but it didn’t do anything.

1 Like
2

+1 for this question. Sadly there are no answers :confused:

3

I may have corrected the problem in your css if you include this:

.item-divider i { position:absolute; right:10px; }

the icon will be moved to the far right of the list divider, other than that I have no idea how to correct it

4

Add class pull-right:
<i class="ion-plus-circled pull-right" ng-click="urFunction('test')"></i>

Then define style:
.pull-right { float: right }

5

I am facing the same issue in IONIC2.
Up to now it’s not resolved in beta 6.
Any plans to make it work?

6

i had faced the same problem
fortunately it resolves to the missing icon class in the i tag
here is a working example Please note the icon class

<ion-item  class="item-divider item-icon-left">
          <i class="icon ion-plus-circled" ng-click="addNote()"></i> Notes 
 </ion-item>

Regards