Adding K Icon To Menu Button

[Cody]

Afternoon

 

Using Package Telerik.UI.for.AspNet.Core(2020.2.617)

 

Goal: 

I want to switch Kendo Menu to use k-i-menu rather than font awsome icon.

 

Problem

It is always blank when i reference the k-i-menu. This is because it adds k-sprite into the span it generates and that seems to cause the issues

e.g. <span class="k-sprite k-icon k-i-menu k-icon-32"></span>

Example Code

<span class="k-icon k-i-menu k-icon-32"></span> <-- this shows bars
<div style="padding-right: 5px" class="k-content">
    @(Html.Kendo().Menu().Name("NavMenu").Items(items =>
    {items.Add()
            .Items(innerChilderen =>
            {
                innerChilderen.Add().Text("Reports").Url("/Something");
            }).SpriteCssClasses("k-icon k-i-menu k-icon-32");  <--- this is blank
    }))
</div>

 

I assumed it would be an easy switch since it was already working with font awesome. Not sure if i'm missing something as far as using the kendo icons with this menu. Looking forward to your thoughts.

 

 

 

 

 

[Dimitar]

Hello Cody,

The Encoded option can be utilized to add a font icon to the Menu items as demonstrated in this HowTo article:

• https://docs.telerik.com/kendo-ui/knowledge-base/menu-font-icon-in-item

I hope this helps. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik

[Cody]

This article you gave me does show the k icon now but now the menu animation is no longer working using this method. Am i missing something.  I changed my SpriteCssClassesto to Encode(false).Text(<span class=\"k-icon k-i-menu k-icon-32\"></span>) instead

[Dimitar]

Hello Cody,

I am attaching an ASP.NET Core solution where I have added a simple Menu with a configured icon (as demonstrated in the Knowledge Base article). With it, the Menu animations is correctly being executed when the nested list is opened.

May I ask you to examine the sample and let me know if I am missing something?

Regards,
Dimitar
Progress Telerik