New to Kendo UI for jQuery? Download free 30-day trial

Place Icon in DropDownList Placeholder


Product Progress® Kendo UI® DropDownList for jQuery
Operating System All
Browser All
Browser Version All


How can I show a custom icon in the placeholder of the DropDownList?


  1. Use the optionLabelTemplate property of the DropDownList.
  2. By using the Kendo UI templates, include an element which displays one of the available Kendo UI web font icons.
<input id="dropdownlist" />

    dataSource: [{
        productName: "Product 1",
        productId: 1
        productName: "Product 2",
        productId: 2
    dataTextField: "productName",
    dataValueField: "productId",
    optionLabel: {
      productName: "Select a product...",
      productId: ""
    optionLabelTemplate: "<span class='k-icon k-i-twitter'></span>"

See Also

In this article