css - iconic - Cambiar el tamaño del icono del icono de Material Design.

material icons font download

Question

Me he referido y luego he declarado 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 usan clases como class="md-icon dp48" pero no funciona en mi caso.

Answer 1

A veces, establecer el tamaño de fuente no reducirá el tamaño del icono. Coz, el tamaño de fuente recomendado es 18, 24, 36 o 48px.

Intente configurar los atributos "altura", "ancho", "altura de línea" para ese ícono en particular. Esto podría ayudar.

Answer 2

Al leer el diseño del material 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, simplemente puede cambiar o anular los íconos css del material.

Código de muestra:

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

Más detalles here

Answer 3

Hay un atributo de tamaño asociado con la etiqueta del icono como check_circle

así que usando el atributo de tamaño, podemos cambiar el tamaño de los iconos.

Answer 4

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

font-size: 50px !important;

Answer 5

Si estoy haciendo una única vez, por lo general solo agrego un estilo = modificación 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.

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

Answer 6

puede cambiar la propiedad de tamaño de fuente, se reflejará en el icono porque es un "ICONO DE FUENTE"

Answer 7

si estas 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);
}