Place Icon in DropDownList Placeholder

Environment

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

Description

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

Solution

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" />

<script>
  $("#dropdownlist").kendoDropDownList({
    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>"
  });
</script>

See Also

• API Reference of the optionLabelTemplate Property
• Overview of the Kendo UI Templates
• List of the Kendo UI Web Font Icons