Icon selector usage in live site

2024/11/01 7:39 PM

I'm currently working on a feature where I'm attempting to leverage the built-in Icon selector form control to add icons to a Content Type within my site.

I see that when an icon is selected on a Content Item, the name is what gets saved in the database (e.g. xp-accordion). I was hoping the existing approach of using icons in the UI would be the same as in Kentico Xperience 13 (https://docs.kentico.com/13/custom-development/extending-the-administration-interface/working-with-font-icons), where I can just throw this into the class of an icon element, but this doesn't appear to be the case.

I haven't seen any documentation on this topic for Xperience by Kentico, so I was curious of the following:

  1. Is this possible, and I'm just missing the documentation on it?
  2. If #1 isn't true, are there any plans to add this into the product any time soon?

I'll roll my own custom solution if that's the best path forward, but don't want to invest the time in the event it's already possible and I'm missing it, or if it's going to be functionality that's added in the not too distant future.

Environment

  • Xperience by Kentico version: 29.6.2
  • .NET version: 8

Answers

2024/11/01 8:13 PM
Accepted answer

There are 2 sets of icons being used in Xperience's administration today

  1. New icons based on the new React admin UI.
    Example: UI application pages via their registration attribute. These can be referenced in C# via Kentico.Xperience.Admin.Base.Icons
  2. Old icons based on Page Builder and Form Builder UI.
    Example: Page Builder widgets via their registration attribute. These don't have a C# representation but can be accessed via this icon list.

The plan is to consolidate all icons in the future to only use the new React based icons.

There is no way to extend these icon sets in Xperience by Kentico today, but I think it's a feature worth requesting on the Xperience by Kentico roadmap.

Note: neither set is intended to be used for visitors to a channel (e.g. a website visitor) - they are only meant for administration UI use.

2025/01/24 5:57 PM

An additional note for anyone in the future reading this. I added a `KenticoIcons` class (with the help of AI) to the Kentico Community Portal project which you can copy into your projects.

/// <summary>
/// https://devnet.kentico.com/docs/icon-list/index.html
/// </summary>
public static class KenticoIcons
{
    public const string A_LOWERCASE = "icon-a-lowercase";
    public const string ACCORDION = "icon-accordion";
    public const string ADD_MODULE = "icon-add-module";
    public const string ANDROID = "icon-android";
    public const string APPLE = "icon-apple";
    public const string ARROW_CROOKED_LEFT = "icon-arrow-crooked-left";
    // ... 400+ more icons
}

This makes it possible to access the Page Builder and Form Builder icons the same way we access the new Administration UI icons under Kentico.Xperience.Admin.Base.Icons.

To response this discussion, you have to login first.