<div class="row">
  <div class="col-md-12 col-lg-6">
    <nb-card class="nb-icons">
      <nb-card-header>
        Nebular
      </nb-card-header>
      <nb-card-body>
        <div class="icon" *ngFor="let icon of icons.nebular"><i class="{{ icon }}"></i></div>
      </nb-card-body>
      <nb-card-footer>
        <a href="https://www.npmjs.com/package/nebular-icons" target="_blank">See all Nebular icons</a>
      </nb-card-footer>
    </nb-card>

    <nb-card>
      <nb-card-header>
        Font awesome icons
      </nb-card-header>
      <nb-card-body>
        <div class="icon" *ngFor="let icon of icons.fontAwesome"><i class="fa {{ icon }}"></i></div>
      </nb-card-body>
      <nb-card-footer>
        <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">
          See all Font Awesome icons
        </a>
      </nb-card-footer>
    </nb-card>
  </div>

  <div class="col-md-12 col-lg-6">
    <nb-card>
      <nb-card-header>
        Ionicons
      </nb-card-header>
      <nb-card-body>
        <div class="icon" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
      </nb-card-body>
      <nb-card-footer>
        <a href="http://ionicons.com/" target="_blank">See all ionicons icons</a>
      </nb-card-footer>
    </nb-card>
  </div>
</div>
