Иконки в списке

В списках могут использоваться иконки, которые выравниваются слева и/или справа относительно каждого элемента списка. Тип выравнивания следует указывать для каждого item отдельно. Вы можете добавить иконку на любую строку списка с помощью встроенного функционала Ionicons или нужного пакета шрифтов. 

Используйте item-icon-left и item-icon-right для выравнивания иконки по левому или правому краю соответственно. В случае, если в одной строке списка нужно разместить две иконки с разных сторон, используйте оба класса: item-icon-left и item-icon-right.

Пример ниже использует элемент <a> для каждой строки списка, что делает каждую из них полностью кликабельной. Если используется элемент <a>  или <button>, и при этом справа не вставлена иконка, то небольшая стрелка, указывающая направо, будет добавлена автоматически.

В приведенном примере для первой строки произведено выравнивание иконки по левому краю. Для второй – выравнивание по обеим сторонам. Для третьей – иконка слева и item-note. Для четвертой – добавлен элемент badge. 

<div class="list">

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

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>