Solution 1 :

You can use appearance=”outline”. The datepicker icon is in the inner of the mat-form-field border.

Try this:

<mat-form-field appearance="outline">
  <mat-label>Outline form field</mat-label>
  <input matInput placeholder="Placeholder" [matDatepicker]="myDatepicker">
  <mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatepicker></mat-datepicker>

See: stackblitz

Problem :

Trying to customize the calendar icon to make it appear inside the text box , If I try to add css I’m not getting it responsive, I have attached my current output and desired output

Expected Output


Current Output



Comment posted by Marc

Is the mat-datepicker in a formfield or is it a normal text-input? show us your template or make a stackblitz please.

Comment posted by Hari

Yes, the mat-datepicker is a form field

Comment posted by

it’s only use matDatepickerToggleIcon, see the example about this in

Comment posted by Hari

I tried using this solution but it remains the same as previous one


Leave a Reply

Your email address will not be published. Required fields are marked *