change angular material datePicker icon

Question

I wonder if it is possible to change the icon displayed using the datePicker of angular material.

This is the code from the angular material docs.

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

Is there a way to achieve that?

Answer 1

You can add a mat-icon custom in mat-datepicker-toggle

<input matInput [matDatepicker]="dp" placeholder="Select minimum date" disabled>
<mat-datepicker-toggle matSuffix [for]="dp">
  <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #dp disabled="false"></mat-datepicker>

Answer 2

You can do it by overriding the background property of mat-datepicker-toggle class. Add the path of an icon that you want from your asset folder.

Here's an example of replacing calender icon with an alert.png icon in src > asset > img:

>>> .mat-datepicker-toggle {
    background: url("../../assets/img/alert-circle-24.png") no-repeat !important;
}

html:

<md-input-container align="end">
   <input mdInput [mdDatepicker]="datepicker"
                  [(ngModel)]="date">
   <button mdSuffix [mdDatepickerToggle]="datepicker"></button>
</md-input-container>