Right arrow on list item with left icon


#1

Is there a way to display the right chevron on a list item with a left icon?

ie:

<a href="#/tab/search" class="item item-icon-left">
  <i class="icon ion-search"></i>
    Search
  <i class="icon ion-chevron-right icon-accessory"></i>
</a>

any ideas are appreciated


#2

CSS:
.pull-right { position: absolute; right: 2px; }

HTML:
<a href="#/tab/search" class="item item-icon-left"> <i class="icon ion-search"></i> Search <i class="icon ion-chevron-right icon-accessory pull-right"></i> </a>


#3

Use ionics item-icon-left and item-icon-right wrapper classes like below

 <ion-item>
    <div class="item-icon-left">
        <i class="icon ion-email"></i>
        <p>View Email</p>
    </div>
    <div class="item-icon-right">
        <i class="icon ion-ios-arrow-right"></i>
    </div>
</ion-item>

#4
<a class="item item-icon-left item-icon-right" href="#">
  <i class="icon ion-search"></i>
  Search
  <i class="icon ion-ios-arrow-right"></i>
</a>

#5

@syedHaroon, this worked for me. very clean.