Cambiar el tamaño del icono de los iconos de Material AngularJS

Si encuentras algún fallo con tu código o proyecto, recuerda probar siempre en un ambiente de testing antes añadir el código al trabajo final.

Solución:

Al leer el diseño de materiales en github, encontré estas cosas útiles que podrían ayudarte.

 /* Rules for sizing the icon. */
.material-icons.md-18  font-size: 18px; 
.material-icons.md-24  font-size: 24px; 
.material-icons.md-36  font-size: 36px; 
.material-icons.md-48  font-size: 48px; 

/* Rules for using icons as black on a light background. */
.material-icons.md-dark  color: rgba(0, 0, 0, 0.54); 
.material-icons.md-dark.md-inactive  color: rgba(0, 0, 0, 0.26); 

/* Rules for using icons as white on a dark background. */
.material-icons.md-light  color: rgba(255, 255, 255, 1); 
.material-icons.md-light.md-inactive  color: rgba(255, 255, 255, 0.3); 

Desde el código anterior, allí puede simplemente cambiar o anular los íconos de material css.

Código de muestra:

face

Más detalles aquí

Si estoy haciendo una sola vez, generalmente solo agrego una modificación de estilo = al tamaño de fuente en la etiqueta. Pero sí, para resumir, no hay otro truco real que no sea definir sus propios estilos de tamaño para adjuntarlos en css como una solución más permanente.

insert_invitation

si estás usando scss

@mixin md-icon-size($size: 24px) 
  font-size: $size;
  height: $size;
  width: $size;


.md-icon-16 
  @include md-icon-size(16px);


.md-icon-18 
  @include md-icon-size(18px);


.md-icon-24 
  @include md-icon-size(24px);


.md-icon-36 
  @include md-icon-size(36px);

No se te olvide compartir este escrito si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador