Icons in menu not visible in latest library (2024 Q4)

[Francis]

@(Html.Kendo().Menu()
  .Name("Menu")
  .Items(items =>
  {
      items.Add()
              .Text("Products - Expand me")
              .Items(children =>
              {
                  children.Add().Text("Furniture");

                  children.Add().Encoded(false).Text("<span class=\"k-icon k-i-clock\"></span>I have a Font Icon");

                  children.Add().Text("Decor");

              });

      items.Add().Text("Stores");
  })
)

The above code does not render the icon.  All the examples in the demos are with Images. Latest update broke my application. What is the new way to achieve this?

[Eyup]

Hello Francis,

 

Thank you for writing to us.

Allow me to share some information for the LESS to SASS migration updates:

There were changes with version 2022 R1 which introduced many enhancements around the Themes of the components, but they lead to visual breaking changes and this update requires special attention and time to handle them.

Also, another change is the LESS themes dropping, which happened in version 2023.1.314:
https://www.telerik.com/support/whats-new/aspnet-mvc/release-history/ui-for-asp-net-mvc-r1-2023-sp1-(version-2023-1-314)

You can find more info in these blogs posted couple of years prior to prepare our users:
- https://www.telerik.com/blogs/improvements-coming-telerik-kendo-ui-themes-2022
- https://www.telerik.com/blogs/future-plans-telerik-kendo-ui-less-themes

You can also check this article for migrating from LESS to SASS:
https://docs.telerik.com/aspnet-mvc/styles-and-layout/less-themes/less-themes-migration

The new CSS CDN links in the Views/Shared/_Layout.cshtml file should look like this:

<link href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
<link href="https://unpkg.com/%40progress/kendo-font-icons/dist/index.css" rel="stylesheet" type="text/css" />

Once you add the font icons reference provided above, you need also to include the k-font-icon class:
https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/

And now it will look like this:

                  children.Add().Encoded(false).Text("<span class=\"k-icon k-font-icon k-i-clock\"></span>I have a Font Icon");

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

 

Regards,
Eyup
Progress Telerik

[Francis]

Adding the k-font-icon class worked for me. Thanks.