<webicon icon="fa:github-square" style="color: #1fa67a;"></webicon>
<span webicon="foundation:social-github" style="color: #074e68;"></span>
<div data-webicon="material:plus-one" style="color: #03a9f4;"></div>

<webicon icon="fa:github-square" style="color: #1fa67a;"></webicon>
<span webicon="foundation:social-github" style="color: #074e68;"></span>
<div data-webicon="material:plus-one" style="color: #03a9f4;"></div>

angular.module('app', ['webicon']);

<webicon icon="search"></webicon>
<span webicon="news"></span>
<div data-webicon="print"></div>

<webicon icon="search"></webicon>
<span webicon="news"></span>
<div data-webicon="print"></div>

angular.module('app', ['webicon']);

<webicon icon="symbol:about"></webicon>
<span webicon="g:home"></span>
<div data-webicon="icons8_cup" alt="Icons8 Cup"></div>

$(function() {
  $(document).webicons({
    iconSets: {
      symbol: 'assets/icon-sets/symbol.svg',
      g: 'assets/icon-sets/group.svg'
    }
  })
});

<webicon icon="symbol:about"></webicon>
<span webicon="g:home"></span>
<div data-webicon="icons8_cup" alt="Icons8 Cup"></div>

angular.module('app', ['webicon'])
  .config(function($webiconProvider) {
    $webiconProvider
      .svgSet('symbol', 'assets/icon-sets/symbol.svg')
      .svgSet('g', 'assets/icon-sets/group.svg')
  });

<webicon icon="contacts" style="color: #34495e;"></webicon>
<span webicon="picture" class="iridescent"></span>
<div data-webicon="assets/icons/svg/i-love-icons8.svg" alt="I Love Icons8" class="green"></div>

$(function() {
  $(document).webicons({
    defaultSvgSetUrl: 'assets/icon-sets/colorless.svg'
  })
});

.green {
  color: #27ae60;
}
.iridescent {
  -webkit-animation: iridescent 5s infinite;
  animation: iridescent 5s infinite;
}
@-webkit-keyframes iridescent {
  0% { color: #e74c3c; }
  25% { color: #f1c40f; }
  75% { color: #9b59b6; }
  100% { color: #e74c3c; }
}
@keyframes iridescent {
  0% { color: #e74c3c; }
  25% { color: #f1c40f; }
  75% { color: #9b59b6; }
  100% { color: #e74c3c; }
}

<webicon icon="contacts" style="color: #34495e;"></webicon>
<span webicon="picture" class="iridescent"></span>
<div data-webicon="assets/icons/svg/i-love-icons8.svg" alt="I Love Icons8" class="green"></div>

angular.module('app', ['webicon'])
  .config(function($webiconProvider) {
    $webiconProvider
      .defaultSvgSetUrl('assets/icon-sets/colorless.svg')
  });

.green {
  color: #27ae60;
}
.iridescent {
  -webkit-animation: iridescent 2s infinite;
  animation: iridescent 2s infinite;
}
@-webkit-keyframes iridescent {
  0% { color: #e74c3c; }
  25% { color: #f1c40f; }
  75% { color: #9b59b6; }
  100% { color: #e74c3c; }
}
@keyframes iridescent {
  0% { color: #e74c3c; }
  25% { color: #f1c40f; }
  75% { color: #9b59b6; }
  100% { color: #e74c3c; }
}

<webicon icon="assets/icons/svg/like.svg" alt="Like"></webicon>
<span webicon="department"></span>
<div data-webicon="iLoveIcons8" data-alt="I Love Icons8" style="color: #32c24d;"></div>

$(function() {
  $(document).webicons({
    icons: {
      department: 'assets/icons/svg/department.svg',
      iLoveIcons8: 'assets/icons/svg/i-love-icons8.svg'
    }
  })
});

<webicon icon="assets/icons/svg/like.svg" alt="Like"></webicon>
<span webicon="department"></span>
<div data-webicon="iLoveIcons8" data-alt="I Love Icons8" style="color: #32c24d;"></div>

angular.module('app', ['webicon'])
  .config(function($webiconProvider) {
    $webiconProvider
      .icon('department', 'assets/icons/svg/department.svg')
      .icon('iLoveIcons8', 'assets/icons/svg/i-love-icons8.svg')
  });

<span webicon="gi:home" style="color: #2c3e50;"></span>
<div data-webicon="f:home-ios" data-alt="home" style="color: #2980b9;"></div>

$(function() {
  $(document).webicons({
    fonts: {
      f: 'custom-iconic-font custom-iconic-font-?'
    }
  })
});

<span webicon="gi:home" style="color: #2c3e50;"></span>
<div data-webicon="f:home-ios" data-alt="home" style="color: #2980b9;"></div>

angular.module('app', ['webicon'])
  .config(function($webiconProvider) {
    $webiconProvider
      .font('f', 'custom-iconic-font custom-iconic-font-?')
  });

<webicon icon="idea"></webicon>
<span webicon="s:key" alt="Key"></span>
<div data-webicon="full-trash" data-alt="Full Trash"></div>

$(function() {
  $(document).webicons({
    sprites: {
      s: 'sprite sprite-%'
    },
    defaultSource: 's'
  })
});

<webicon icon="idea"></webicon>
<span webicon="s:key" alt="Key"></span>
<div data-webicon="full-trash" data-alt="Full Trash"></div>

angular.module('app', ['webicon'])
  .config(function($webiconProvider) {
    $webiconProvider
      .sprite('s', 'sprite sprite-%')
      .defaultSource('s')
  });

<webicon icon="calendar"></webicon>
<span webicon="assets/icons/png/icons8_cup.png" alt="Icons8 Cup"></span>
<div data-webicon="clock"></div>

$(function() {
  $(document).webicons({
    icons: {
      clock: 'assets/icons/png/clock.png',
      calendar: 'assets/icons/png/calendar.png'
    }
  })
});

<webicon icon="calendar"></webicon>
<span webicon="assets/icons/png/icons8_cup.png" alt="Icons8 Cup"></span>
<div data-webicon="clock"></div>

angular.module('app', ['webicon'])
  .config(function($webiconProvider) {
    $webiconProvider
      .icon('clock', 'assets/icons/png/clock.png')
      .icon('calendar', 'assets/icons/png/calendar.png')
  });