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

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