--- name: iconic url: /iconic controller: IconicController ---
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.
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.
You can easily change the colors of the icons with our color classes like so:
You can affect the size of the icons with our color classes like so:
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.
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.
This example renders a rotating icon. The icon rotates through 4 different icons, changing every 3 seconds.
This example sets the icon programatically before the iconic directive is compiled by angular.
This example sets the icon programically after the iconic directive is compiled by angular.
You can use these Sass variables to customize the icons: