New to Kendo UI for jQuery? Download free 30-day trial

Add Font Icons to Menu Items


Product Progress® Kendo UI® Menu for jQuery Progress® Telerik® UI Menu for ASP.NET Core Progress® Telerik® UI Menu for ASP.NET MVC


The Kendo UI Menu provides built-in support for raster images and sprites in its items. However, how can I add font icons to a Kendo UI Menu item?


Inside the Menu items, add your own HTML which supports font icons—for example, the Kendo UI font icons.

The following examples demonstrate the implementation of the suggested approach for the MVC HTML helpers and for a plain jQuery widget. For the MVC instance, set .Encode(false) for the item so that its HTML is parsed, and escape the quotation marks.

  .Items(items =>
              .Text("Products - Expand me")
              .Items(children =>

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




When you work with a plain jQuery widget, you only need to add the HTML to the markup from which you instantiate the widget.

<ul id="menu">
        Products - Expand me

          <!-- If you instantiate the Menu from HTML, you can put your own
                content in it. There, you can use the font icons
                as described in the following article:
            <li><span class="k-icon k-i-clock"></span>I have a font icon</li>

  <li>Some item</li>

$(document).ready(function() {
In this article