Using the Icon Theme Preview tool

Use the Icon Theme Preview tool to view all available icons, determine how they look with each theme, and preview how using the color overrides affects each theme.

To enable the tool, find hcm.util.enableIconThemePreview(false); in the code and change the value to true.

Changes made with this tool are temporary. Refreshing the page reverts it back to its default state.

Caution: 
Disable this feature when you are done so that the standard employee cannot see it.

For example, use these preview steps:

  1. Change the Preview All Available Icons setting to On.
  2. Change the theme from default to dark red.
  3. Override each of the primary, secondary, and background colors from shades of red to purple with gray secondary and background colors.
  4. Update the template HTML.
    For example:
    hcm.util.loadIcons({
    theme: "darkred",
    // Override theme colors:
    primaryColor: "#704f9c",
    secondaryColor: "#e0e0e0",
    backgroundColor: "#ADADAD"
});