Unplanned
Last Updated: 14 Nov 2023 20:45 by ADMIN
Cyril
Created on: 27 Oct 2021 09:50
Category: Menu
Type: Feature Request
7
Icon customization for kendo-menu

Hello,

 

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.

 

Thanks!


Regards

3 comments
ADMIN
Hetali
Posted on: 14 Nov 2023 20:45

Hello Vanessa,

To add custom icons in the Kendo UI Menu, use NgClass in the Item Template. For example:

<!--Load the font awesome icons package:-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
       
<kendo-menu [items]="items">
  <ng-template kendoMenuItemTemplate let-item="item">
    <span ngClass="fa fa-lg fa-thumbs-up"></span>
    {{item.text}}
  </ng-template>
</kendo-menu>


In this StackBlitz example, I have added Font Awesome icon in the Kendo UI Menu using the item template.

I hope this solution helps.

Regards,
Hetali
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Vanessa
Posted on: 10 Nov 2023 07:53

Hi, same request here.

 

Some controls have iconClass as their input property.

https://www.telerik.com/kendo-angular-ui/components/buttons/api/ButtonComponent/

MenuItems already have icon and svgIcon.

https://www.telerik.com/kendo-angular-ui/components/menus/api/MenuItem/

 

It would be nice to have the same input option for MenuItems.

 

ADMIN
Hetali
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.

Regards,
Hetali
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.