| 
 | 1 | +---  | 
 | 2 | +title: Icons  | 
 | 3 | +page_title: Telerik UI Menu component for {{ site.framework }} Documentation - Icons  | 
 | 4 | +description: "Learn how you can display icons in the items of the {{ site.product }} Menu."  | 
 | 5 | +slug: htmlhelpers_menu_icons  | 
 | 6 | +position: 6  | 
 | 7 | +---  | 
 | 8 | + | 
 | 9 | +# Icons  | 
 | 10 | + | 
 | 11 | +Starting with Telerik UI for {{ site.framework }} R2 2025, the Menu exposes two new icon-related fields—the [`DataIconField`](/api/kendo.mvc.ui.fluent/menubuilder#dataiconfieldsystemstring) and the [`DataIconClassField`](/api/kendo.mvc.ui.fluent/menubuilder#dataiconclassfieldsystemstring) options. Depending on your project's needs, you can enhance the content of the Menu by displaying either an SVG or a Font Icon. To display an icon in the items of the Menu, select one from the <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">list of icons supported by Telerik UI for {{ site.framework }}</a>, and set the `Icon` field to the necessary icon name.   | 
 | 12 | + | 
 | 13 | + | 
 | 14 | +## SVG Icons  | 
 | 15 | + | 
 | 16 | +The following example demonstrates how to display SVG icons in the Menu's items when the component is configured for remote data binding. Also, the icon of the first item has a custom CSS class added through the `IconClass` option.  | 
 | 17 | + | 
 | 18 | +```HtmlHelper  | 
 | 19 | +@(Html.Kendo().Menu()  | 
 | 20 | +    .Name("menu")  | 
 | 21 | +    .DataTextField("Text")  | 
 | 22 | +    .DataIconField("Icon")  | 
 | 23 | +    .DataIconClassField("IconClass")  | 
 | 24 | +    .BindTo(new MenuItem[] {  | 
 | 25 | +        new MenuItem { Text = "Home", Icon = "home", IconClass = "custom-icon-class" },  | 
 | 26 | +        new MenuItem { Text = "About Us", Icon = "info-circle" },  | 
 | 27 | +        new MenuItem { Text = "Contact", Icon = "envelope" }  | 
 | 28 | +    })  | 
 | 29 | +)  | 
 | 30 | +```  | 
 | 31 | +{% if site.core %}  | 
 | 32 | +```TagHelper  | 
 | 33 | +@using Kendo.Mvc.TagHelpers  | 
 | 34 | +
  | 
 | 35 | +@{  | 
 | 36 | +    var items = new MenuItemBase[] {  | 
 | 37 | +        new MenuItemBase { Text = "Home", Icon = "home", IconClass = "custom-icon-class" },  | 
 | 38 | +        new MenuItemBase { Text = "About Us", Icon = "info-circle" },  | 
 | 39 | +        new MenuItemBase { Text = "Contact", Icon = "envelope" }  | 
 | 40 | +    };  | 
 | 41 | +}  | 
 | 42 | +
  | 
 | 43 | +<kendo-menu   | 
 | 44 | +    name="menu"   | 
 | 45 | +    dataTextField="Text"   | 
 | 46 | +    dataIconField="Icon"   | 
 | 47 | +    dataIconClassField="IconClass"   | 
 | 48 | +    bind-to="@items"   | 
 | 49 | +/>  | 
 | 50 | +```  | 
 | 51 | +{% endif %}  | 
 | 52 | + | 
 | 53 | +## Font Icons  | 
 | 54 | + | 
 | 55 | +The following example demonstrates how to display Font icons in the Menu's items when the component binds to a data collection.  | 
 | 56 | + | 
 | 57 | +```HtmlHelper  | 
 | 58 | +<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />  | 
 | 59 | +
  | 
 | 60 | +@(Html.Kendo().Menu()  | 
 | 61 | +    .Name("menu")  | 
 | 62 | +    .BindTo(new MenuItem[] {  | 
 | 63 | +        new MenuItem { Text = "Home", Icon = "home" },  | 
 | 64 | +        new MenuItem { Text = "About Us", Icon = "info-circle" },  | 
 | 65 | +        new MenuItem { Text = "Contact", Icon = "envelope" }  | 
 | 66 | +    })  | 
 | 67 | +)  | 
 | 68 | +
  | 
 | 69 | +<script>  | 
 | 70 | +    kendo.setDefaults("iconType", "font");  | 
 | 71 | +</script>  | 
 | 72 | +```  | 
 | 73 | +{% if site.core %}  | 
 | 74 | +```TagHelper  | 
 | 75 | +@using Kendo.Mvc.TagHelpers  | 
 | 76 | +
  | 
 | 77 | +<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />  | 
 | 78 | +
  | 
 | 79 | +@{  | 
 | 80 | +    var items = new MenuItemBase[] {  | 
 | 81 | +        new MenuItemBase { Text = "Home", Icon = "home" },  | 
 | 82 | +        new MenuItemBase { Text = "About Us", Icon = "info-circle" },  | 
 | 83 | +        new MenuItemBase { Text = "Contact", Icon = "envelope" }  | 
 | 84 | +    };  | 
 | 85 | +}  | 
 | 86 | +
  | 
 | 87 | +<kendo-menu   | 
 | 88 | +    name="menu"  | 
 | 89 | +    bind-to="@items"   | 
 | 90 | +/>  | 
 | 91 | +
  | 
 | 92 | +<script>  | 
 | 93 | +    kendo.setDefaults("iconType", "font");  | 
 | 94 | +</script>  | 
 | 95 | +```  | 
 | 96 | +{% endif %}  | 
 | 97 | + | 
 | 98 | +## Icon Position  | 
 | 99 | + | 
 | 100 | +You can define the position of the icons in the Menu items by using the `IconPosition()` option. By default, each icon is positioned before the item's text.  | 
 | 101 | + | 
 | 102 | +```HtmlHelper  | 
 | 103 | +@(Html.Kendo().Menu()  | 
 | 104 | +    .Name("menu")  | 
 | 105 | +    .IconPosition(IconPosition.After)  | 
 | 106 | +    .BindTo(new MenuItem[] {  | 
 | 107 | +        new MenuItem { Text = "Home", Icon = "home" },  | 
 | 108 | +        new MenuItem { Text = "About Us", Icon = "info-circle" },  | 
 | 109 | +        new MenuItem { Text = "Contact", Icon = "envelope" }  | 
 | 110 | +    })  | 
 | 111 | +)  | 
 | 112 | +```  | 
 | 113 | +```TagHelper  | 
 | 114 | +@using Kendo.Mvc.TagHelpers  | 
 | 115 | +
  | 
 | 116 | +@{  | 
 | 117 | +    var items = new MenuItemBase[] {  | 
 | 118 | +        new MenuItemBase { Text = "Home", Icon = "home" },  | 
 | 119 | +        new MenuItemBase { Text = "About Us", Icon = "info-circle" },  | 
 | 120 | +        new MenuItemBase { Text = "Contact", Icon = "envelope" }  | 
 | 121 | +    };  | 
 | 122 | +}  | 
 | 123 | +
  | 
 | 124 | +<kendo-menu  | 
 | 125 | +    name="menu"  | 
 | 126 | +    icon-position="@IconPosition.After"  | 
 | 127 | +    bind-to="@items"   | 
 | 128 | +/>  | 
 | 129 | +```  | 
 | 130 | + | 
 | 131 | +## See Also  | 
 | 132 | + | 
 | 133 | +* [Using the API of the Menu for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/menu/api)  | 
 | 134 | +* [Client-Side API of the Menu](https://docs.telerik.com/kendo-ui/api/javascript/ui/menu)  | 
 | 135 | +* [Server-Side API of the Menu](/api/menu)  | 
 | 136 | +{% if site.core %}  | 
 | 137 | +* [Server-Side API of the Menu TagHelper](/api/taghelpers/menu)  | 
 | 138 | +{% endif %}  | 
 | 139 | +* [Knowledge Base Section](/knowledge-base)  | 
0 commit comments