29 votos

Cambiar el tamaño del icono de Material Design

He hecho referencia a continuación, declaró un icono

<i class="material-icons">face</i>

Pero, ¿cómo puedo cambiar el tamaño del icono?

En el sitio oficial https://design.google.com/icons/ Puedo ver que utilizan clases como class="md-icon dp48" pero en mi caso no funciona.

49voto

claudios Puntos 3294

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 iconos de material css.

Código de ejemplo:

<i class="material-icons md-18">face</i>

Más detalles aquí

15voto

user1670304 Puntos 151

Si estoy haciendo una cosa única, suelo añadir una modificación de estilo= al tamaño de la fuente en la etiqueta. Pero sí, en resumen, no hay ningún truco real que no sea definir sus propios estilos de tamaño para adjuntar en css como una solución más permanente.

<i class="material-icons" style="font-size: 50px">insert_invitation</i>

5voto

Riapp Puntos 2889

Si está utilizando 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);
}

1voto

Patryk Ties Puntos 11

Puede utilizar css normal, pero debe anular el estilo en línea con:

font-size: 50px !important;

0voto

Ahmad Mayo Puntos 31

Puedes cambiar la propiedad font-size, se reflejará en el icono porque es un "FONT ICON"

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X