Would this be helpful for the ion-item css?

ionic-v1
1

Would it be helpful to support icons on the left side for list items, the same way images can be used on the left?

Currently images are left aligned via the item-avatar class:

<ion-item class="item-avatar">
  <img src="my-item-image.png">My Item Text
</ion-item>

But icons won’t work because ionic css looks for img:

<ion-item class="item-avatar">
  <i class="icon ion-email"></i>My Item Text
</ion-item>

This could be fixed by adding to the existing css. Benefit would be not having to manually add item-image, and not having to add worry about setting font size.

changes needed:
.item-avatar > img:first-child, .item-content > i:first-child
class: .item-content > i:first-child {
font-size: 40px;
}

thoughts?

2

Have you tried item-icon-left?

 <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>
3

Thanks for the suggestion - looks like item-icon-left is meant for editing icons like delete or reorder. See image below comparing it to item-avatar.

I don’t mind preparing a pull request with my css update for item-avatar but since I’m new here wanted to discuss if it makes sense first.




<ion-list>
    <ion-item class="item-icon-left">
        <i class="icon ion-document-text"></i>item-icon-left
    </ion-item>
    <ion-item class="item-icon-left">
        <i class="icon ion-document-text"></i>item-icon-left
    </ion-item>
    <ion-item class="item-icon-left">
        <i class="icon ion-document-text"></i>item-icon-left
    </ion-item>
    <ion-item class="item-avatar">
        <i class="icon ion-document-text"></i>item-avatar
    </ion-item>
    <ion-item class="item-avatar">
        <i class="icon ion-document-text"></i>item-avatar
    </ion-item>
    <ion-item class="item-avatar">
        <i class="icon ion-document-text"></i>item-avatar
    </ion-item>
</ion-list>
4

In your first image, it looks like the icons for item-icon-left are a bit messed up.

Look at this :

Does that work?