Is it possible to change the default icon in Kendo Angular Date Picker to Font Awesome icon?

Question

This is the icon inside the button, that we click to open the Calendar in the Kendo Date Picker

This can be seen in simple angular app with Kendo Date Picker

Answer 1

You could override the css for the span that includes the icon:

.k-i-calendar::before {      
  font-family: "Font Awesome 6 Free";
  content: "\f073";
  font-weight: 900;
}

DEMO

Answer 2

Yes!

1. You can create a custom IconService that inherits the IconSettingsService provided by Kendo Angular suite.

2. Then you can overwrite the internal getCustomFontIconClass function and replace the default calendar icon of the DatePicker (or any other component icon) with any CSS classes.

   import { IconSettingsService } from '@progress/kendo-angular-icons';
   
   @Injectable()
   export class MyIconService extends IconSettingsService {
     private iconDictionary: { [key: string]: string } = {
       calendar: 'fa fa-taxi',
     };
   
     public getCustomFontIconClass(iconName: string): string {
       return (
         this.iconDictionary[iconName] || super.getCustomFontIconClass(iconName)
       );
     }
   }
   

3. Don't forget to register the custom IconService in the module.

   import { IconSettingsService, IconsModule, ICON_SETTINGS } from '@progress/kendo-angular-icons';
   
    providers: [
          { provide: ICON_SETTINGS, useValue: { type: 'font' } },
          { provide: IconSettingsService, useClass: MyIconService },
      ],
   

More details and a runnable demo can be found in the following section of the Icons documentation:

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-font-icons

Here is an example demonstrating how to replace the DatePicker icon with a fa fa-taxi FontAwesome icon:

https://stackblitz.com/edit/angular-ofx3zf