<div class="widgets">

  <div class="row">
    <div class="col-md-6">
      <ba-card title="Kameleon SVG Icons" baCardClass="with-scroll">
        <div class="row clearfix">
          <div class="kameleon-row" *ngFor="let icon of icons.kameleonIcons">
            <div class="kameleon-icon"><img src="{{ (icon.img | kameleonPicture )}}"><span>{{ icon.name }}</span></div>
          </div>
        </div>
        <a href="http://www.kameleon.pics/" target="_blank" class="see-all-icons">See all Kamaleon icons</a>
      </ba-card>

      <ba-card title="Socicon" baCardClass="with-scroll">
        <div class="row icons-list danger">
          <div class="col-xs-2" *ngFor="let icon of icons.socicon"><i class="socicon">{{ icon }}</i></div>
        </div>
        <a href="http://www.socicon.com/chart.php" target="_blank" class="see-all-icons">See all Socicon icons</a>
      </ba-card>
    </div>
    <div class="col-md-6">
      <ba-card title="Icons With Rounded Background" baCardClass="with-scroll">
        <div class="row clearfix">
          <div class="kameleon-row" *ngFor="let icon of icons.kameleonRoundedIcons">
            <div class="kameleon-icon with-round-bg {{ icon.color }}"><img src="{{ ( icon.img | kameleonPicture ) }}"><span>{{ icon.name }}</span></div>
          </div>
        </div>
        <a href="http://www.kameleon.pics/" target="_blank" class="see-all-icons">See all Kamaleon icons</a>
      </ba-card>

      <ba-card title="Ionicons" baCardClass="with-scroll">
        <div class="row icons-list primary">
          <div class="col-xs-2" *ngFor="let icon of icons.ionicons"><i class="{{ icon }}"></i></div>
        </div>
        <a href="http://ionicons.com/" target="_blank" class="see-all-icons">See all ionicons icons</a>
      </ba-card>

      <ba-card title="Font Awesome Icons" baCardClass="with-scroll">
        <div class="row icons-list success awesomeIcons">
          <div class="col-xs-2" *ngFor="let icon of icons.fontAwesomeIcons"><i class="fa {{ icon }}"></i></div>
        </div>
        <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank" class="see-all-icons">See all Font Awesome icons</a>
      </ba-card>
    </div>
  </div>

</div>
