Icons
Starting with version R2 2025, you can use icons in the Menu items.
For a runnable example, refer to the demo on displaying icons in the Menu.
Basic Usage
The icons of the items can be configured depending on how the Menu binds to its data. For more information on the available data-binding approaches, refer to the data binding article of the Menu.
Remote Data Binding
When the Menu is configured for remote data binding or binds to a Model collection using the BindTo() method, specify the Model property that stores the icon's name through the DataIconField option. Also, you can define an additional Model property that holds a custom CSS class for the respective icon and set it in the Menu configuration using the DataIconClassField method.
@(Html.Kendo().Menu()
.Name("menu")
.DataTextField("Text")
.DataIconField("Icon")
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetItems", "Menu"))
)
)Items Binding
When using Items binding to define the Menu items, you can specify an icon for each item through the Icon option.
To define a custom CSS class for the respective icon, use the IconClass option.
@(Html.Kendo().Menu()
.Name("menu")
.Items(items => {
items.Add().Text("Item 1").Icon("pencil");
items.Add().Text("Item 2").Icon("home");
items.Add().Text("Item 3").Icon("plus");
})
)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" }
})
)