How do you position mat-datepicker-toggle mat-icon at the end of the date input field

Question

I have tried to search all over the net for some time now and no direct answer to this. I want the toggle icon be placed at the very end of the date input field.

Answer 1

To position the icon at the end you have to use matSuffix, and if you want it at the beginning, matPrefix.

  <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>


  <mat-datepicker-toggle matPrefix [for]="rangePicker"></mat-datepicker-toggle>

Answer 2

Maybe try the example

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>