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>
<mat-hint>Hint</mat-hint>
</mat-form-field>
See: stackblitz
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
Is the mat-datepicker in a formfield or is it a normal text-input? show us your template or make a stackblitz please.
Yes, the mat-datepicker is a form field
it’s only use matDatepickerToggleIcon, see the example about this in
I tried using this solution but it remains the same as previous one