Hola estimada comunidad , tengo un problema para cambiar la altura del componente mat-form-field de angular material 15.1. Estoy desarrollando un proyecto y tengo este html
<div class="dashboard-search-toolbar">
<form class="dashboard-search-form">
<mat-form-field class="dashboard-search-field" appearance="fill">
<mat-label>Buscar servicios</mat-label>
<input matInput aria-label="Buscar servicios" [formControl]="menuCtrl">
<mat-icon color="accent" matSuffix>search</mat-icon>
</mat-form-field>
<br>
</form>
</div>
Y necesito ajustar el tamaño de la altura del mat-form-field
a un valor de 50px; para esto he aplicado la siguiente regla CSS
mat-form-field{
height: 50px;
}
Sin embargo tengo este resultado:
Y al intentar escribir en el input, el componente se comporta de esta manera:
¿Cuá es la manera correcta de realizar esa modificación de este componente?. Se lo agradezco de antemano.