icon property in Kendo drop down list

1 Answer 569 Views
Accessibility
Vikas
Top achievements
Rank 1
Iron
Iron
Vikas asked on 20 Oct 2023, 11:03 AM | edited on 20 Oct 2023, 11:03 AM
can we use icon property in Kendo Dropdown List Angular

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 20 Oct 2023, 07:39 PM

Hello Vikas,

Yes, you can add the icons in the Kendo UI DropDownList component. Based on your requirement, you can use the desired Template. For example:

<kendo-dropdownlist>
  <ng-template kendoDropDownListItemTemplate let-dataItem>
    <kendo-svg-icon [icon]="dataItem.icon"></kendo-svg-icon> {{ dataItem.text }}
  </ng-template>
  <ng-template kendoDropDownListValueTemplate let-dataItem>
    <kendo-svg-icon [icon]="dataItem.icon"></kendo-svg-icon> {{ dataItem?.text }}
  </ng-template>
</kendo-dropdownlist>

I have created this StackBlitz example where I have added the SVG Icons in the DropDownList.

Additionally, we also have the Icon DropDownButton if you would like to use that component.

I hope I have addressed your question correctly. Please let me know if I can further assist you.

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
gensha
Top achievements
Rank 1
commented on 19 Feb 2024, 02:29 AM

Hi, 

Can we also use the url image instead of icon?

Hetali
Telerik team
commented on 20 Feb 2024, 10:06 PM

Hi Gensha,

Yes, you can add an Image URL in the Kendo UI DropDownList templates. Take a look at the StackBlitz example.

Let me know if it helps or if you have questions.

Regards,
Hetali
Progress Telerik
Tags
Accessibility
Asked by
Vikas
Top achievements
Rank 1
Iron
Iron
Answers by
Hetali
Telerik team
Share this question
or