Change the DatePicker Icon with Web Font Icon

Environment

Product Version	2019.3.1016
Product	DatePicker for Progress® Kendo UI®

Description

How can I use a Web Font Icon in place of the default icon in the Kendo UI DatePicker?

Solution

In order to replace the default icon, use the .removeClass() and the .addClass() method respectively as seen in the following snippet:

$(".k-icon").removeClass("k-i-calendar");
$(".k-icon").addClass('k-i-calendar-date');

Example

<input id="datePicker"/>

<script>
    $(document).ready(function(){
        $("#datePicker").kendoDatePicker();
        $(".k-icon").removeClass("k-i-calendar");
        $(".k-icon").addClass('k-i-calendar-date');
    });
</script>

See Also

• .removeClass()
• .addClass()