ionic-framework/ionic/components/tabs/test/tab-bar-icons/main.html

<div style="margin: 4px 0">

  <h6>Icon Top of Text (Default)</h6>
  <div class="tab-bar-container toolbar-ios">
    <div class="tab-bar">
      <a class="tab-bar-item tab-active">
        <icon class="tab-bar-item-icon ion-home"></icon>
        <span class="tab-bar-item-text">Home</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-star"></icon>
        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
      </a>
    </div>
  </div>

  <h6>Icon Bottom of Text</h6>
  <div class="tab-bar-container toolbar-ios">
    <div class="tab-bar tab-bar-icon-bottom">
      <a class="tab-bar-item tab-active">
        <icon class="tab-bar-item-icon ion-home"></icon>
        <span class="tab-bar-item-text">Home</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-star"></icon>
        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
      </a>
    </div>
  </div>

  <h6>Icon Left of Text</h6>
  <div class="tab-bar-container toolbar-ios">
    <div class="tab-bar tab-bar-icon-left">
      <a class="tab-bar-item tab-active">
        <icon class="tab-bar-item-icon ion-home"></icon>
        <span class="tab-bar-item-text">Home</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-star"></icon>
        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
      </a>
    </div>
  </div>

  <h6>Icon Right of Text</h6>
  <div class="tab-bar-container toolbar-ios">
    <div class="tab-bar tab-bar-icon-right">
      <a class="tab-bar-item tab-active">
        <icon class="tab-bar-item-icon ion-home"></icon>
        <span class="tab-bar-item-text">Home</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-star"></icon>
        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
      </a>
    </div>
  </div>

  <h6>Icon Only</h6>
  <div class="tab-bar-container toolbar-ios">
    <div class="tab-bar tab-bar-icon-only">
      <a class="tab-bar-item tab-active">
        <icon class="tab-bar-item-icon ion-home"></icon>
        <span class="tab-bar-item-text">Home</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-star"></icon>
        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
      </a>
    </div>
  </div>

  <h6>Text Only</h6>
  <div class="tab-bar-container toolbar-ios">
    <div class="tab-bar tab-bar-text-only">
      <a class="tab-bar-item tab-active">
        <icon class="tab-bar-item-icon ion-home"></icon>
        <span class="tab-bar-item-text">Home</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-star"></icon>
        <span class="tab-bar-item-text">Favorites Ellipsis Ellipsis</span>
      </a>
      <a class="tab-bar-item">
        <icon class="tab-bar-item-icon ion-ios-gear"></icon>
        <span class="tab-bar-item-text">Settings Ellipsis Ellipsis</span>
      </a>
    </div>
  </div>

</div>