Angular material 10 date-picker (mat-datepicker) does not align with others input fields

Question

Using Angular 10 and Angular material 10, using a datepicker in a form doesn't align with other input form field, as in this figure: fields not aligned

Example code in ~component.html:

<mat-form-field color="primary" appearance="fill">
    <mat-label>Data Da</mat-label>
    <input matInput [matDatepicker]="picker1" [(ngModel)]="dataDa">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1 color="primary"></mat-datepicker>
</mat-form-field>

<mat-form-field class="example-form-field" appearance="fill">
    <mat-label>Ora Da</mat-label>
    <input matInput type="text" [(ngModel)]="oraDa">
</mat-form-field>

Do you have same issue if you try it?

Answer 1

It seems to be a bug. I found this solution: in the ~component.scss file I've put this css rule:

::ng-deep mat-datepicker-toggle.mat-datepicker-toggle button.mat-focus-indicator.mat-icon-button.mat-button-base {
  display: inherit;
}