@vcl/vcl/select-list/demo/example-icon.html

The whole VCL in one package

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<ul class="select-list open" role="listbox" aria-multiselectable="false" aria-activedescendant="activeItem" style="position: static;">
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="icogram select-list-item-label">
      <div class="icon far fa-user" aria-hidden="true" aria-label="account" role="img"></div>
      <div class="text">Prepended icon</div>
    </div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
      <div class="icogram select-list-item-label">
        <div class="text">Appended icon</div>
        <div class="icon far fa-user" aria-hidden="true" aria-label="account" role="img"></div>
      </div>
    </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
    <div class="icogram select-list-item-label">
      <div class="icon far fa-user" aria-hidden="true" aria-label="account" role="img"></div>
      <div class="text">Prepended icon with sub-label</div>
    </div>
    <div class="select-list-item-sub-label">Sub-label</div>
  </li>
  <li class="select-list-item" role="option" tabindex="0" aria-selected="false">
      <div class="icogram select-list-item-label">
        <div class="text">Appended icon with sub-label</div>
        <div class="icon far fa-user" aria-hidden="true" aria-label="account" role="img"></div>
      </div>
      <div class="select-list-item-sub-label">Sub-label</div>
    </li>
</ul>