Menu icons when initializing from a UL

[Kenneth]

I have an existing menu that is initialized from a UL element. I would like to be able to add icons to some of the menu items - but don't see a way to code that in the UL/LI items. I've tried several different methods - but no luck. Basically - I was hoping something like this would work:

<ul>
<li><span class="k-icon k-i-custom"></span>One</li>
<li>Two</li>
</ul>

[Holger]

According to the documentation and the demos it seems not possible to add images to menu items in HTML.

[Kenneth]

Yes. I noticed that. There must be an undocumented way to do it. Could probably pull apart the generated HTML, after initializing a menu from JSON and figure it out. Just thought someone else may have already done that.

I suppose I could switch to generating the menu from JSON, but there were other complications.

[Kamen Bundev]

Hi,

Well, actually you can add icons through static HTML if you use the .k-sprite CSS class for the icon (Kendo Menu adds this class to the sprite when it is built dynamically). This should work:
<ul id="menu">
    <li>
        <span class="k-sprite icon-class"></span>Text with Sprite
    </li>
</ul>
<script>
    $(document).ready(function() {
        $("#menu").kendoMenu();
    });
</script>

I'll make sure that this information is added to the documentation.

All the best,
Kamen Bundev
the Telerik team

[Kenneth]

I tried this (in a functioning menu) - but no icon appears. What might I be doing incorrectly?

<li><span class="k-sprite k-i-refresh"></span>Refresh</li>

[Kamen Bundev]

Hello Kenneth,

The k-sprite class doesn't have the k-icon background-image set, thus nothing is rendered (k-sprite is meant to be used with custom images). However, if you add the k-icon class, the element will get removed by the arrow init (which uses k-icon to find the arrow). I'll change this for the next release, but meanwhile you can use k-tool-icon instead, like this:
<li><span class="k-sprite k-tool-icon k-i-refresh"></span>Refresh</li>

Greetings,
Kamen Bundev
the Telerik team

[Chris]

Sorry to be bringing back to life an old thread but any reason why not all the icons work this way?  For example, arrowheads don't work, see my fiddle.  Any reason why this doesn't work?  Anything I can do to make them work?

Thanks

[Kamen Bundev]

Hello Kenneth,

Thank you for noticing this. It is indeed a bug in the Kendo UI Menu icon handling. I've just fixed it and the fix will be available with the next internal build. I've also updated your points for the find.

Regards,
Kamen Bundev
Telerik

[Simon]

It's been a year since the last post in this topic and I don't see any limitation regarding the icon / sprite in the documentation.

Was it fixed since?

[Iliana Dyankova]

Hi Simon,

The issue which Kamen mentioned has been already addressed - take a look at this example.

Regards,
Iliana Nikolova
Telerik

 

 

[Simon]

Thank you Iliana,

I've noticed this new feature so I just wanted to make sure it was officially supported.  This is great since this feature also offer a good alternative to another question of mine about the append method.  If we can create a menu item with an image using a DOM element (versus an html string), we are able to get the reference to that item before the append method call.