intente primero usando:

 .mat-icon{ font-size: 10px; }

Si no puedes, prueba de la siguiente manera:

 .mat-icon { width: 10px; }

Buena suerte !!!

font-size tiende a interferir con la posición. hago algo como:

 <mat-icon class="icon-display">home</mat-icon>

CSS:

 .icon-display { transform: scale(2); }

Donde el 2 en realidad puede ser cualquier número. 2 duplica el tamaño original.

Cree que el nombre de la clase coincida con la función real. Se vuelve más fácil de recordar, usar y ampliar.

 .icon-2x { transform: scale(2); } .icon-3x { transform: scale(3); }

Para envolver correctamente la fuente, además de configurar el tamaño de la fuente, también debe ajustar la altura y el ancho.

Si quieres hacerlo globalmente:

 .mat-icon { font-size: 50px; height: 50px ; width: 50px; }

Si desea aplicar el tamaño solo a ciertos iconos

 .customIconSize { font-size: 50px; height: 50px ; width: 50px ; }

Y en tu plantilla HTML

 <button mat-icon-button> <mat-icon class="customIconSize">visibility</mat-icon> </button>

Dado que Angular Material usa la familia de fuentes ' Material Icons ', el tamaño del ícono depende del tamaño de la fuente .

Por lo tanto, si desea modificar el tamaño del ícono, cambie su tamaño de fuente en su archivo CSS.

Por ejemplo,

 .mat-icon { font-size: 50px; }

También debe cambiar el ancho y el alto para que el contenedor coincida con el tamaño de fuente.

Dependiendo de su caso de uso, una buena característica del mat-icon es una entrada bool de [inline], configúrelo en verdadero y se ajustará automáticamente al elemento en el que se encuentra.

El enfoque de "tamaño de fuente" solo funciona para el tamaño normal (basado en fuente). Por lo tanto, no funciona para los íconos svg, que la única forma de cambiar el tamaño que realmente funcionó para mí hasta ahora fue escalarlo hacia arriba o hacia abajo.