Estoy mostrando con éxito un ícono en mi aplicación, el ícono account_circle , usando Angular Material 2.0.0-beta.3, así:
<md-icon>account_circle</md-icon> Incluí <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> en mi aplicación.
Sin embargo, ninguna de las formas recomendadas de aumentar el tamaño del ícono usando las clases md parece funcionar. ¿Cómo cambio el tamaño sin recurrir a un tamaño de fuente? ¿Y cómo puedo cambiar el color para que sea del mismo color que los marcadores de posición del cuadro de entrada?
Actualizar
Ok, tengo el ícono cambiando de tamaño al aplicar el tamaño de fuente directamente al ícono mismo, así:
<div fxFlexAlign="center"><md-icon style="font-size:48px;">account_circle</md-icon></div>Sin embargo, ahora tengo el problema de que el ícono no está completamente centrado; parece que está usando un solo cuadrante de la imagen para calcular el centrado, por lo que no es del todo correcto. ¿Cuál es la mejor manera de centrar un ícono de Material agrandado como este?
Deberá establecer el tamaño del icono md, no solo el tamaño de fuente:
<md-icon style="font-size:48px; width: 48px; height:48px;">o crear una nueva clase:
<md-icon class="md-48"> .md-48 { font-size:48px; width: 48px; height:48px; }Para cambiar el tamaño del icono md, agregue esto a su CSS:
md-icon { font-size: 48px; width: 48px; height:48px; }Para cambiar el color del icono md, agregue esto a su CSS:
md-icon { color: #FFF !important; }