angular - Cómo cambiar el tamaño del icono md en Material

md select

Question

Esta pregunta proviene del material2 github repo https://github.com/angular/material2/issues/4422#issuecomment-300309224

Todavía tengo problemas para diseñar un componente de material que está envuelto en un componente personalizado.

Tengo un componente <logo> que contiene <md-icon svgIcon="logo"></md-icon>

añadiendo

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

No se aplicará al componente de material dentro de mi componente personalizado

Answer 1

Creo que el problema se debe a la incorporación de svg sin viewBox, lo que evita todos los intentos de cambio de tamaño.

Me parece que la alternativa es usar el iconfont directamente:

<i class="material-icons" style="font-size: 40px">face</i>

Answer 2

En mi caso, esto funciona perfectamente. Uso material más nuevo (6.2.0)

CSS:

.icon {
    font-size: 36px;
}

HTML:

  <div class="icon">
    <mat-icon [inline]="true">done</mat-icon>
  </div>

Lo principal es establecer: [inline]="true"

Desde la API :

@Input () inline: boolean - Si el icono debe estar en línea, el tamaño del icono para que coincida con el tamaño de fuente del elemento en el que se encuentra el icono.

Answer 3

Estoy usando

<mat-icon svgIcon="cellphone-link"></mat-icon>

con

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

para redimensionar el elemento svg. Fue la única solución de trabajo para mí, donde 2 es el 200% del tamaño real (también sería posible reducirlo a, por ejemplo, 0.5).

Configurar "altura" y "ancho" no era una opción para mí, porque el elemento svg renderizado del componente mat-icon no tiene ningún atributo viewBox en este momento. Pero el atributo viewBox es obligatorio para que funcione con el estilo "alto" y "ancho". Tal vez el equipo de Material Angular lo mejore en el futuro.

Como nota al margen : puede centrar el ícono del tapete con un envoltorio principal y

display: flex;
align-items: center;
justify-content: center;

Answer 4

He estado recibiendo algunas preguntas sobre esto, así que solo quería hacer un ejemplo más claro de cómo usarlo ...

/* 1. Add this mixin to a "global" scss */

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

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

ejemplo de uso

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}

Answer 5

Otra opción posible, si desea tener la opción de escalar imágenes a cualquier tamaño de fuente hasta un máximo (por ejemplo, 300 px), el siguiente bucle scss funcionaría;

@for $i from 1 through 300{
  .iconsize-#{$i}{
    font-size: $i+unquote(''px'') !important;
    height: $i+unquote(''px'') !important;
    width: $i+unquote(''px'') !important;
  };
}

Si desea establecer un tamaño mínimo para generar en el CSS compilado, simplemente cambie 1 arriba al tamaño mínimo que desee y, para cambiar el valor máximo, cambie 300 al valor máximo que desee.

Esto es particularmente útil para los íconos como SVG, se escalarán según el tamaño establecido (aunque he tenido algunos problemas para que los íconos SVG de terceros se ajusten al contenedor, pero ese es un problema diferente). Si eres como yo, a menudo necesitas tener la mayoría de los íconos en un tamaño específico (p. Ej., Íconos de menú) con algunos íconos más grandes (p. Ej., Elementos decorativos). Este bucle le permite probar fácilmente diferentes tamaños de fuente hasta cualquier tamaño en incrementos de 1px hasta que encuentre un tamaño que funcione para usted.

¿Qué hace esto?

Cuando su SCSS se compila en CSS, generará un bucle con las clases relevantes de 1 a 300.

¿Como lo uso?

Para usar, simplemente agregue la .iconsize-[x] a su mat-icon ;

<mat-icon class="iconsize-45">show_chart</mat-icon>

Este ejemplo establecerá el ícono a 45px de ancho y alto.

Answer 6

Prueba esto.

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

.material-icons.mat-icon {
  @include md-icon-size(32px);
}

Answer 7

Edición: ¡Por favor vea la respuesta aceptada!

Usarlo así funciona bien.

<md-icon svgIcon="arrow-down" class="size-16"></md-icon>

al haber definido esto en el tema css (no en el componente: host)

md-icon.size-16 {
  width: 16px;
  height: 16px;
  line-height: 16px;
}