Custom Icon image for Kendo Dropdown

Question

I have a kendo dropdown list that I have Created in Jquery.

Markup:

 $('.divReassignTo').width(widthForControls).kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "Guid",
            dataSource: dataForAssignedTo,
            optionLabel: "Select..."
        });

I want to replace the default icon that shows up in the dropdown to a specific icon image that I have.

How can I do it? Any help will be highly appreciated.

Answer 1

Define the following CSS definition:

span.k-widget.k-dropdown.k-header span.k-icon.k-i-arrow-s {
    background-image: url('url to your image');
    background-position: 0 0;
    background-size: 16px 16px;
}

If you want to limit it to a DropDownList which id is dropdown, then you can narrow the CSS to:

span.k-widget.k-dropdown.k-header[aria-owns='dropdown_listbox'] span.k-icon.k-i-arrow-s {
    background-image: url('url to your image');
    background-position: 0 0;
    background-size: 16px 16px;
}

See an example here: http://jsfiddle.net/OnaBai/2sSgu/