Working with Smart Icons

Iconic Smart Icons range in utility from changing display states and managing toggles via data attributes to loading and playing audio files, being fully controllable via JavaScript APIs available on the icons.

Data attributes

Iconic's File icon, for example, is more than a static image. The file extension text it displays is configurable using the data-file-extension attribute. No more spending time hand creating icons for all the special filetypes you need.

Need a file icon for your X-ray crystallography electron density files? We've got you covered.

<img class="iconic" data-src="file.svg" data-file-extension="CCP4">

JavaScript APIs

Smart Icons can also be controlled using their JavaScript APIs. Continuing with the file icon example, if you wanted to change or set the extension via JavaScript at anytime you could call setFileExtension() on the icon:

myIcon.setFileExtension('MOV');

Refreshing icons

Sometimes it makes sense or is easier to change an icon's data attributes instead of using its API calls directly. In that case you can make your attribute change(s) and then pass your icon to the iconic.js update method.

myIcon.setAttribute('data-file-extension', 'XML');
IconicJS().update(myIcon);