Icons
Starting with Telerik UI for ASP.NET Core R2 2025, the Menu exposes two new icon-related fields—the DataIconField and the DataIconClassField 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 list of icons supported by Telerik UI for ASP.NET Core, and set the Icon field to the necessary icon name.
SVG Icons
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.
@(Html.Kendo().Menu()
.Name("menu")
.DataTextField("Text")
.DataIconField("Icon")
.DataIconClassField("IconClass")
.BindTo(new MenuItem[] {
new MenuItem { Text = "Home", Icon = "home", IconClass = "custom-icon-class" },
new MenuItem { Text = "About Us", Icon = "info-circle" },
new MenuItem { Text = "Contact", Icon = "envelope" }
})
)Font Icons
The following example demonstrates how to display Font icons in the Menu's items when the component binds to a data collection.
<link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-font-icons/dist/index.css" />
@(Html.Kendo().Menu()
.Name("menu")
.BindTo(new MenuItem[] {
new MenuItem { Text = "Home", Icon = "home" },
new MenuItem { Text = "About Us", Icon = "info-circle" },
new MenuItem { Text = "Contact", Icon = "envelope" }
})
)
<script>
kendo.setDefaults("iconType", "font");
</script>Icon Position
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.
@(Html.Kendo().Menu()
.Name("menu")
.IconPosition(IconPosition.After)
.BindTo(new MenuItem[] {
new MenuItem { Text = "Home", Icon = "home" },
new MenuItem { Text = "About Us", Icon = "info-circle" },
new MenuItem { Text = "Contact", Icon = "envelope" }
})
)