Mat-form-field has different height in different browsers - css

Question

I have a normal form with mat-form-field inputs inside. Form contains a field for date and a field for hour. The fields are looking good in chrome:
However, in Firefox and Microsoft Edge the one field has a bigger height than the other:
I'm not really sure what might cause such thing, especially that my components don't implement any special styles to the inputs. I'm just using Flex Layout
<!-- Date and Time Start -->
<div fxFlex
fxLayout.lt-sm="column"
fxLayoutGap="2%"
fxLayoutAlign.gt-sm="space-around stretch"
fxLayout="row">
<!-- Date Start -->
<mat-form-field appearance="fill"
fxFlex
color="accent">
<input id="inputDateStart"
matInput
[formControl]="startDate"
(dateChange)="startDateChanged($event.value)"
[matDatepicker]="pickerStart"
[max]="startDatePickerMax"
placeholder="ab">
<mat-error>{{ getErrorMsgForDate() }}</mat-error>
<mat-datepicker-toggle matSuffix
[for]="pickerStart"></mat-datepicker-toggle>
<mat-datepicker #pickerStart></mat-datepicker>
<mat-hint>Ab Aufnahmedatum</mat-hint>
</mat-form-field>
<!-- Time Start -->
<app-w-mat-timepicker color="accent"
id="timePickerStart"
placeholder="von"
[timeFormat]="24"
[(userTime)]="startTimeToFilterFor"
(userTimeChange)="startTimeChanged($event)"></app-w-mat-timepicker>
</div>
And my clock component
<div fxFlex
fxLayout="row">
<mat-form-field fxFlex
appearance="fill"
color="accent">
<input matInput
[placeholder]="placeholder"
[value]="time">
<mat-hint>Uhrzeit</mat-hint>
<mat-icon matSuffix
(click)="showPicker($event)"
svgIcon="clock"></mat-icon>
</mat-form-field>
</div>
Stackblitz example

Answer 1

The problem was with the icon of the datepicker, it is too big!
To solve this, I had to add the icon manually to my project and then use it inside the mat-datepicker-toggle component.
Reference this answer https://stackoverflow.com/a/48924487/4956266

Answer 2

The answer of Motassem Jalal is correct. The icon of the datepicker is too big.
But you don't have to add your own icon. You can simply change the the font-size in the mat-datepicker-toggle component.
For example:
mat-datepicker-toggle {
font-size: 10px;
}
and in html:
<mat-form-field appearance="fill">
<mat-label>Label</mat-label>
<input matInput [matDatepicker]="dateToPicker" />
<mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
<mat-datepicker #dateToPicker></mat-datepicker>
</mat-form-field>