Font Awesome Dual Tone Icons

[Mark]

When using a custom optionLabelTemplate and valueTemplate with Font Awesome dual tone icons it seems we need to set the display css class to inline-flex to keep the icon from separating (Kendo UI v2020.3.1021 in Chrome v88.0.4324.104).

$("#dropDownList").kendoDropDownList({
  optionLabel: "Select One"
  , template: "<i class=\"#=icon# mr-1\" style=\"font-size: 25px\"></i>#=name#"
  , optionLabelTemplate: "<i class=\"fad fa-hard-hat mr-1\" style=\"display: inline-flex\"></i>Select One"
  , valueTemplate: "<i class=\"#=icon# mr-1\" style=\"display: inline-flex\"></i>#=name#"
  ...
});

[Misho]

Hi,

Here is a sample that demonstrates how to use font icons in Kendo DropDownlist template, optionLabelTemplate and valueTemplate:

https://dojo.telerik.com/adibomiC/12

You may also find the following article on the matter useful: https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-icon-placeholder 

I hope this helps.

Best Regards,
Misho
Progress Telerik

[Mark]

The fontawesome icon style is actually called duotone in the final release. I am adding it here so it can be searched here in the future.

[Misho]

Hi,

Thanks for your follow up about the font awesome duotone icons styling.

We appreciate your feedback.

Best Regards,
Misho
Progress Telerik