Change the DatePicker Icon with Web Font Icon

Updated on Jun 17, 2026

Environment

Product Version	2019.3.1016
Product	Progress® Kendo UI® DatePicker for jQuery

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:

javascript

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

Example

The following example demonstrates a DatePicker that replaces the default calendar icon with the k-i-calendar-date web font icon after initialization.

<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()