Menu Icon Library reference

[Dmitri]

I am looking at the demo mail app and i noticed that all the menu icons come from the css content: "\e6XX" tag

Rather than looking through every single one is there somewhere that has a reference of them all?

[Marin Bratanov]

Hi Dmitri,

The closest I can offer is the Kendo Font Icon Library: https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web. The font name WebComponentsIcons matches across both suites and the positions of the glyphs in the font should also match. So, you can either include the Kendo stylesheet and library to use directly those classes and icons, or try to use the page above as a reference guide for creating your own classes with the desired content (see below).

UI for ASP.NET AJAX suite itself does not come with a font icon library per se. Not all icons have corresponding class names and most controls define the content: "" for icons they need directly. There are two main reasons for that: 1) for legacy reasons, class names had to be preserved and 2) there has been very little demand for such a feature that does not justify the development cost and the breaking change involved.

Nevertheless, you can try including the fonticon.css file we have, and test the classes listed in it. Usually a <span class="p-icon another-class-from-the-list"></span> should do it. For example:

<telerik:RadStyleSheetManager runat="server" id="rssm1">
    <StyleSheets>
        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Common.fonticons.css" />
    </StyleSheets>
</telerik:RadStyleSheetManager>
<span class="p-icon p-i-arrow-45-up-right"></span>

You can get this file from our source by downloading it from your account. Note that it may change in the future and we do not guarantee backwards compatibility for it, because it is designed for internal use.

Regards,

Marin Bratanov
Progress Telerik

[Vasssek]

Hi Marin,

could you please provide workaround, how to apply kendo ui glyphs to ajax aspx rad button primary icon ?

https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#rendering-with-unicode-numbers

Thank you

Regards

Vasssek

[Marin Bratanov]

Hi Vasssek,

It's the same approach as with applying any other custom font icon: https://docs.telerik.com/devtools/aspnet-ajax/controls/pushbutton/functionality/Icons/custom-icons#font-icons.

Here's an example, the result is below:

<asp:ScriptManager runat="server" ID="sm1" />

<span class="k-icon my-custom-icon-class"></span>

<style>
    .my-custom-icon-class:before {
        content: "\e13a"; /* Adds a glyph using the Unicode character number */
    }
</style>

<telerik:RadButton runat="server" ID="rb1" Text="primary icon with another font" RenderMode="Lightweight">
    <Icon PrimaryIconCssClass="my-custom-icon-class" />
</telerik:RadButton>

where you could skip the Kendo registration because the RadButtons already set the font to be the same font and prepare the icon for taking a font icon. The font used in Telerik.Web.UI is shared with Kendo, so there is a good chance that the glyph positions will match (barring version differences).
Nevertheless, here is an example of adding the kendo shared styles that can also color the span at the top by bringign the font name rules under the k-icon class:

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles//kendo.common.min.css" />

Regards,
Marin Bratanov
Progress Telerik