Free JonDJones Episerver Icon Wrapper Package

In case you haven't stumbled across yet, it's a living style guide for some of the design elements that are available for developers to use within the Episerver back-end. As part of the design elements, there is a set of 150+ icons included in the Episerver baseline bundle that is used through the Episerver back-end. As Episerver is so customizable, it's very easy to do some cool tweaks to improve the back-end. One good example is setting custom icons for certain page types in the navigation tree. If you have read How To Deal With Large Amounts Of PageTypes , you could, for example, display a folder icon against each item. If you want to add a custom icon against the page navigation tree, having to constantly look up the class names from the UX site that you'll need to use and then hard-coding the class name in your code, isn't really ideal. Instead, I've created a custom assembly (available via Nuget) that wraps all the icon names into 5 different static classes so you no longer need to look up an icon name, or hardcoded class names in your code. Now you can easily implement this assembly and use it. Using the wrapper is easy, make sure the class is referenced and then use the assembly like so:

Action Icon


Button Icons


Object Icons


Notification Icons


Object Large Icons

This package is pretty simple, but if you need to add this functionality, it's a very quick and easy way to get started. You can get a hold of it on Nuget here, JonDJones.IconPack.

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();