List Icons

Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each item element. Icons can easily be added to any item by using either the built in Ionicons, or any custom font-pack you choose. Learn more about icons.

Use item-icon-left to line up the icon to the left, and item-icon-right to set the icon to the right. When a list item has an icon on both sides then both classes will need to be applied.

This example uses an <a> element for each item, which allows the entire list item to be tappable. If the item is an <a> or <button> element, and no icon has been added to the right, then a small right arrow will automatically be added.

In the example, the first item only has a left aligned icon. The second item has both left and right side icons. The third item has no a right side icon assigned (whichs defaults to the right arrow). Additionally, the third item also adds an item-note. The fourth icon has added a badge element.

<divclass="list"><aclass="item item-icon-left"href="#"><iclass="icon ion-email"></i>
    Check mail
  </a><aclass="item item-icon-left item-icon-right"href="#"><iclass="icon ion-chatbubble-working"></i>
    Call Ma
    <iclass="icon ion-ios-telephone-outline"></i></a><aclass="item item-icon-left"href="#"><iclass="icon ion-mic-a"></i>
    Record album
    <spanclass="item-note">
      Grammy
    </span></a><aclass="item item-icon-left"href="#"><iclass="icon ion-person-stalker"></i>
    Friends
    <spanclass="badge badge-assertive">0</span></a></div>