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

1 Answer 45 Views
Menu
Francis
Top achievements
Rank 1
Iron
Iron
Iron
Francis asked on 16 Dec 2024, 12:20 PM

@(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?

1 Answer, 1 is accepted

Sort by
1
Eyup
Telerik team
answered on 16 Dec 2024, 06:01 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Francis
Top achievements
Rank 1
Iron
Iron
Iron
commented on 16 Dec 2024, 06:20 PM

Adding the k-font-icon class worked for me. Thanks.
Tags
Menu
Asked by
Francis
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Eyup
Telerik team
Share this question
or