Iconic

We partnered with Iconic to include 24 brilliant, responsive, highly flexible icons for use in your apps. For more info on Iconic or to buy the complete set head to useiconic.com



Search Delete Save Add to Cart

Settings Profile Account

Icon Names


Icon Attributes

Iconic provides the ability to futher customize some of their icons by using data attributes. For example, one can create a chevron icon in any direction using data-direction. Icon attributes can also be passed as an object to the iconic directive using the icon-attrs attribute.


Icon Names

You can add in these sweet icons with this simple markup:

The icons are in the build/assets/img/iconic folder. If you're using the data-src attribute, you can manually pull in the path from there.

The zf-iconic attribute is needed to make the Iconic JS work.


Icon Colors

You can easily change the colors of the icons with our color classes like so:


Icon Sizing

You can affect the size of the icons with our color classes like so:

Small     
Medium     
Large

Responsive Icons

By default, all icons are responsive! Not only do they size, but the IconicJS library swaps in appropriate icons for the current window size. You can use the size attribute within the directive to override the responsiveness. Otherwise, your icon will automatically size itself and render more/less detail depending on the size of the container you place it in. You can resize the window to see the icons below change in size and detail.


Dynamic Icons

All icons seen to this point have been static. The icon to display and the data attributes to use were hard-coded into the HTML. Sometimes the icon to display needs to be determined programatically. Examples of how to use dynamic icons are shown below. At the end you'll find the controller used for the examples.

Rotating Icon

This example renders a rotating icon. The icon rotates through 4 different icons, changing every 3 seconds.


Pre Loaded Icon

This example sets the icon programatically before the iconic directive is compiled by angular.


Delay Loaded Icon

This example sets the icon programically after the iconic directive is compiled by angular.


Example Ionic Controller

function IconicController($scope, $timeout) { var iconNum = 0, icons = [{ icon: 'account', iconAttrs: { state: 'login' } },{ icon: 'account', iconAttrs: { state: 'logout' } },{ icon: 'chevron', iconAttrs: { direction: 'right' } },{ icon: 'chevron', iconAttrs: { direction: 'left' } }]; $scope.rotatingIcon = icons[0]; $scope.staticIcon = icons[0]; $scope.delayLoadedIcon = null; rotateIcon(); loadIcon(); function rotateIcon() { $timeout(function() { if (++iconNum == icons.length) { iconNum = 0; } $scope.rotatingIcon = icons[iconNum]; rotateIcon(); }, 3000); }; function loadIcon() { $timeout(function() { $scope.delayLoadedIcon = icons[0]; }, 3000); }; }