HTML
<mat-form-field appearance="fill" class="height-adjustment1">
<mat-label>Fill form field</mat-label>
<input matInput placeholder="Placeholder" />
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
<mat-hint>Hint</mat-hint>
</mat-form-field>
<mat-form-field appearance="outline" class="height-adjustment2">
<mat-label>Outline form field</mat-label>
<input matInput placeholder="Placeholder" />
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
<mat-hint>Hint</mat-hint>
</mat-form-field>
SCSS
.height-adjustment1 {
height: 70px;
}
.height-adjustment2 {
height: 100px;
}
I am trying to reduce the height of the mat-form-field with the class "height-adjustment2". if the appearence is fill it will work if the appearence is outline then it is not working.