Add Font Icons to Menu Items

Environment

Product

Progress® Kendo UI® Menu for jQuery

Progress® Telerik® UI Menu for ASP.NET Core

Progress® Telerik® UI Menu for ASP.NET MVC

Description

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?

Solution

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.

@(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");
  })
)

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">
    <li>
        Products - Expand me
        <ul>
            <li>
                Furniture
            </li>

          <!-- 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:
                https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web
          -->
            <li><span class="k-icon k-i-clock"></span>I have a font icon</li>


            <li>
                Decor
            </li>
        </ul>
    </li>
  <li>Some item</li>
</ul>

<script>
$(document).ready(function() {
    $("#menu").kendoMenu();
});
</script>