In my case, this works perfectly. I use newest material (6.2.0)
CSS:
.icon {
font-size: 36px;
}
HTML:
<div class="icon">
<mat-icon [inline]="true">done</mat-icon>
</div>
The main thing is to set: [inline]="true"
From the API:
@Input() inline: boolean – Whether the icon should be inlined,
automatically sizing the icon to match the font size of the element
the icon is contained in.