Add Font Icons to Menu Items

[Richard]

Good evening,

I've just upgraded my project from using Telerik UI ASP.NET Core 2022.1.301 to 2024.3.806.

I previously used this article to add icons to my menu items:

Add Font Icons to Menu Items - Kendo UI Menu - Kendo UI for jQuery (telerik.com)

After the upgrade, the icons are no longer appearing.

I'm using the following:

menu.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-gears\"></span>&nbsp;Site Administration").Url("~/Admin")
menu.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-user\"></span>&nbsp;" + User.Identity.Name)

I appreciate that the way the icons works has changed since 2023 R3, but most of the icons seem to work without me having to install anything extra (Font Icons in the Telerik and Kendo UI Design System | Design System Kit).  For example, this works:

columns.Command(command => command.Custom("View").Click("openDetailsPage").IconClass("k-icon k-i-hyperlink-open")).Width(80);

Is this because the Telerik.FontIcons and Telerik.SvgIcons 3.0.0 packages are showing under my project dependencies?

Any clarification you can give would be much appreciated.

Kind regards,

Richard

 

 

[Eyup]

Hello Richard,

 

Thank you for writing to us.

The font-icons are now being distributed separately, as stated here:
https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/

And when you add the link reference to your page, the icons should appear once again. Here is a live sample I've prepared for your convenience:
https://netcorerepl.telerik.com/mSaXPLbD58lvQ4yU25

Do you find this information beneficial? Let me know what you think.

 

Regards,
Eyup
Progress Telerik

[Richard]

Hello Eyup

Many thanks for your reply. It has helped to clarify things.

Owing to the lack of internet connection where my site is running, I've been able to copy the files from Progress\Telerik UI for ASP.NET Core 2024 Q3\styles\font-icons (index.css and kendo-font-icons.ttf) and include them in my application. I 've then referenced that in _Layout.cshtml:

    <link rel="stylesheet" href="~/css/index.css" />

That has allowed icons to appear, if I include the k-i-font-icon class:

<button class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base">
<span class="k-icon k-font-icon k-i-save"></span>Save Changes</button>

This makes the upgrade less painful as I don't have to replace all my buttons with kendo buttons specifying the icon, or add the icon for each button with a script:

kendo.ui.icon($("#infoHover"), { icon: 'info-circle' });

Kind regards,

Richard