In this tutorial, you will learn more about how the UI works in Episerver CMS. You will learn about a free NuGet package that I have created that will allow you to use C# constants to access some out-of-the-box icons that come with Episerver CMS., If you want to improve your content editors UI experience, this is the tutorial for you 🔥🔥🔥

Episerver Front-End Style Guide

In case you haven't stumbled across it, Episerver has published a website that contains the CMS style guide. You can find this style guide over at ux.episerver.com/. This website is a guide for developers about the design elements that are available for use within the Episerver back-end. As part of the design elements, there is a set of 150+ icons included. Having access to icons within the CMS is great, however, without knowing their names it can be a bit time-consuming ot you 🤔

As Episerver is so customizable, it's very easy to write code to change how the backend looks. One good example is rendering custom icons in the navigation tree. In Episerver, it is possible to assign custom icons to page-types. If you want to learn how to do this, I discuss the steps within How To Deal With Large Amounts Of PageTypes. The takeaway is that you can use these icons in the CMS if you want to 😊

If you want to add a custom icon against the page navigation tree, having to constantly look up the icons class names from the UX site is a pain in the ass. Hard-coding the class name in your C# code also is not ideal. What happens if the class name changes? Using hardcoded string value means there is no easy way to update your codebase 😞

JonDJones.IconPack

This is why I've created a NuGet package that wraps all the icon names into 5 different static classes. Using this free package means you no longer need to lookup an icon name or hardcode class names in your code 💥. You can easily implement this package via Nuget and reference the icons class names in the code. This package is pretty simple, however, it's a much better approach to working with the Episerver icon classes directly. You can get a hold of it on Nuget here, JonDJones.IconPack.

After installing the class you will get access to these methods:

  • Action Icon: Access these icons using ActionIcons.[IconName]

  • Button Icons: Access these icons using ButtonIcons.[IconName]

  • Object Icons: Access these icons using ObjectIcons.[IconName]

  • Notification Icons: Access these icons using NotificationIcons.[IconName]

  • Object Large Icons: Access these icons using ObjectIconsLarge.[IconName]

Accessing the Episerver Icon class names is as simple as that. Happy Coding 🤘