Search code examples
angulardatepickerangular-material2

change angular material datePicker icon

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?

Solution

  • 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>