Cambiar el tamaño de SVG en Angular Material 2 usando CSS vanilla o HTML

Solución:

Parece que los estilos de biblioteca anulan su declaración en línea css. Tal vez intente agregar !important declaración a tu estilo: style="font-size: 16 !important" o como no proporcionó más código, intente inspeccionar este nodo de icono para verificar qué estilo define el tamaño de fuente.

También mira aquí

ACTUALIZAR:

Aquí hay otra solución que posiblemente funcione. Agregar transform: scale(2); estilo para el elemento svg que desea cambiar de tamaño, donde 2 es el 200% del tamaño real (por supuesto, también puede reducir su tamaño usando, por ejemplo, el valor 0.5 para el 50%). Aquí hay una muestra de trabajo para el sitio web con sus íconos y un enlace a la documentación:

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}

Jugué con esto durante demasiado tiempo.

Tengo una serie de iconos que quiero escalar para que quepan en varios mat-icon tamaños, pero cada ícono necesita una escala diferente para que parezcan equilibrados con los otros íconos, aumentando efectivamente el tamaño del viewBox.

Al final, esto funcionó bastante bien:

mat-icon
{
    width: 50px;
    height: 50px;

    display: flex;
    flex-shrink: 0;
    justify-content: center;

    outline: 1px dashed red;  // for testing    

    & ::ng-deep svg
    {
        align-self: center;
    }

    &.shrink-90 ::ng-deep svg
    {
        width: 90%;
        height: 90%;
    }

    &.shrink-80 ::ng-deep svg
    {
        width: 80%;
        height: 80%;
    }
}

Entonces creo el mat-icon con esto, donde iconCss="shrink-80"

   <mat-icon svgIcon="{{ feature.name }}" [ngClass]="feature.iconCss"></mat-icon>

los mat-icon en sí mismo se puede escalar con las clases adicionales que desee (como lo haría con un icono normal). Luego, el ‘encogimiento’ ajusta el tamaño dentro de la caja.

Tomando la solución @mpro, hice algunos cambios que funcionan mejor para mí (tengo íconos personalizados, así que tal vez esa sea la razón):

mat-icon[size="2"]{
  width: 48px;
  height: 48px;
}

mat-icon[size="2"] svg{
  transform: scale(2);
  transform-origin: left top;
}

o la solución scss:

@mixin iconSize($size){
  &[size="#{$size}"]{
    width: 24px*$size;
    height: 24px*$size;

    svg{
      transform: scale($size);
      transform-origin: left top;
    }
  }
}

---

---

Utiliza Nuestro Buscador