Last Updated: 02 Nov 2021 20:36 by ADMIN
Created on: 27 Oct 2021 09:50
Category: Menu
Type: Feature Request
Icon customization for kendo-menu



We would like to be able to customize icons used in kendo-menu (ex: arrows to access child elements).

This is required to match the rest of our style guide where we only use fontawesome icons.

Having still some kendo UI icons feel a bit weird at the moment.




1 comment
Posted on: 02 Nov 2021 20:36

Hello Cyril,

Thank for the feature request. I have approved your request and changed it's status to unplanned. You will be notified when there are changes made to the request. The features are added to our roadmap based on the votes, demand, feasibility, etc.

Meanwhile, please use the following CSS as a workaround to replace the Menu icons with the Font Awesome icons:

@import "https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css";

.k-icon.k-menu-expand-arrow.k-i-arrow-60-down::before {
  content: "\\f107";
  font-family: FontAwesome;

.k-icon.k-menu-expand-arrow.k-i-arrow-60-right::before {
  content: "\\f105";
  font-family: FontAwesome;

In this StackBlitz example, I have replaced the Kendo UI Menu icons with the Font Awesome Icons. Make sure to set the encapsulation to ViewEncapsulation.None to set the component style.

I hope this information helps. Please let me know if I can further assist you.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.