icons - bootstrap - font awesome
¿Cómo utilizar los nuevos temas de Ícono de diseño de materiales: Contorneado, Redondeado, Dos tonos y Nítido? (10)
Actualización (31/03/2019): todos los temas de iconos funcionan a través de las fuentes web de Google ahora.
Como señaló Edric, solo es cuestión de agregar el enlace de fuentes web de Google en la cabeza de su documento, así:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Y luego agregar la clase correcta para generar el ícono de un tema en particular.
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
El color de los iconos también se puede cambiar utilizando CSS.
Nota: los iconos de tema de dos tonos son un poco defectuosos en la actualidad.
Actualización (14/11/2018): Lista de 16 iconos de contorno que funcionan con el sufijo "_outline".
Aquí está la lista más reciente de los 16 iconos de contorno que funcionan con la Webfont de iconos de material regular, usando el sufijo _outline (probado y confirmado).
(Como se encuentra en la página de github de material-diseño-iconos . Busque: " _outline_24px.svg ")
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
Tenga en cuenta que pie_chart debe estar " pie_chart_ delineado " y no esbozar .
Este es un truco para probar los nuevos temas de iconos usando una etiqueta en línea. No es la solución oficial.
A partir de hoy (19 de julio de 2018), hace poco más de 2 meses desde que se introdujeron los nuevos temas de iconos,
no hay forma
de incluirlos usando una etiqueta en línea
<i class="material-icons"></i>
.
+Martin ha señalado que hay un problema planteado en Github sobre el mismo: https://github.com/google/material-design-icons/issues/773
Entonces, hasta que Google encuentre una solución para esto, comencé a usar un truco para incluir estos nuevos temas de iconos en mi entorno de desarrollo antes de descargar los iconos apropiados como SVG o PNG. Y pensé en compartirlo con todos ustedes.
IMPORTANTE : no use esto en un entorno de producción, ya que cada uno de los archivos CSS incluidos de Google tiene más de 1 MB de tamaño.
Google utiliza estas hojas de estilo para mostrar los iconos en su página de demostración:
Contorno:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Redondeado:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
Dos tonos:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
Agudo:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
Cada uno de estos archivos contiene los iconos de los temas respectivos incluidos como imágenes de fondo (datos de imagen Base64). Y así es como podemos usar esto para probar la compatibilidad de un ícono en particular en nuestro diseño antes de descargarlo para usarlo en el entorno de producción.
PASO 1 :
Incluye la hoja de estilo del tema que quieres usar. Por ejemplo: para el tema ''Outlined'', use la hoja de estilo para ''outline.css''
PASO 2 :
Agrega las siguientes clases a tu propia hoja de estilo:
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
PASO 3 :
Use el icono agregando las siguientes
clases
a la etiqueta
<i>
:
1)
material-icons-new
clase
2) El nombre del icono como se muestra en la página de demostración de los iconos de material, con el nombre del tema seguido de un guión.
Prefijos:
outline-
:
outline-
Redondeado:
round-
Dos tonos:
twotone-
Sharp:
sharp-
Por ejemplo (para el icono ''anuncio''):
outline-announcement
,
outline-announcement
round-announcement
twotone-announcement
sharp-announcement
3) Utilice un
icon-white
opcional de tercera clase para invertir el color de negro a blanco (para fondos oscuros)
Cambiar el tamaño del icono:
Como se trata de una imagen de fondo y no de un icono de fuente, use las propiedades de
height
y
width
de CSS para modificar el tamaño de los iconos.
El valor predeterminado se establece en 24 px en la clase
material-icons-new
.
Ejemplo:
Caso I: para el tema resumido del icono de account_circle :
1) Incluir la hoja de estilo:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
2) Agregue la etiqueta del icono en su página:
<i class="material-icons-new outline-account_circle"></i>
Opcional (para fondos oscuros):
<i class="material-icons-new outline-account_circle icon-white"></i>
Caso II: Para el tema de Sharp del icono de evaluación :
1) Incluir la hoja de estilo:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
2) Agregue la etiqueta del icono en su página:
<i class="material-icons-new sharp-assessment"></i>
(Para fondos oscuros):
<i class="material-icons-new sharp-assessment icon-white"></i>
No puedo enfatizar lo suficiente como para que NO ES LA MANERA CORRECTA de incluir los iconos en su entorno de producción. Pero si tiene que escanear varios íconos en su página en desarrollo, la inclusión del ícono es bastante fácil y le ahorra mucho tiempo.
Descargar el ícono como SVG o PNG es una mejor opción cuando se trata de la optimización de la velocidad del sitio, pero los íconos de fuentes ahorran tiempo cuando se trata de la fase de creación de prototipos y verificar si un ícono en particular va con su diseño, etc.
Actualizaré esta publicación cuando Google encuentre una solución para este problema que no implique descargar un ícono para su uso.
Google ha renovado sus iconos de diseño de materiales con 4 nuevos temas predeterminados:
Esbozado, redondeado, bicolor y agudo , además del tema regular de línea de base :
Pero, desafortunadamente, no dice en ninguna parte cómo usar los nuevos temas.
Lo he estado utilizando a través de Google Web Fonts al incluir el enlace:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Y luego usando el ícono requerido como se sugiere en la documentación :
<i class="material-icons">account_balance</i>
Pero siempre muestra la versión ''Filled / Baseline''.
He intentado hacer lo siguiente para usar el tema Contorneado :
<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>
y, cambiando el enlace de Fuentes Web a:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">
Pero no funciona.
Y no tiene sentido tomar fotos en la oscuridad de esa manera.
tl; dr: ¿Alguien ha intentado usar los nuevos temas? ¿Funciona incluso como la versión de línea de base (etiqueta html en línea)? O, ¿está destinado solo para ser descargado como formatos SVG o PNG?
Gracias por adelantado.
El enlace webfonts funciona ahora, en todos los navegadores!
Simplemente agregue sus temas al enlace de fuente separado por una canalización (
|
), como este
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
Luego haz referencia a la clase, así:
// class="material-icons" or class="material-icons-outlined"
<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>
Este patrón también funcionará con material angular:
<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
A partir del 27 de febrero de 2019, hay fuentes CSS para los nuevos temas del Icono de material.
Sin embargo, tienes que crear clases CSS para usar las fuentes.
Las familias de fuentes son las siguientes:
-
Material Icons Outlined- iconos de contornos -
Material Icons Two Tone-Material Icons Two Tone -
Material Icons Round- iconos redondeados -
Material Icons Sharp- Iconos de Sharp
Vea el ejemplo de código a continuación para un ejemplo:
body {
font-family: Roboto, sans-serif;
}
.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: ''liga'';
-webkit-font-smoothing: antialiased;
}
.material-icons-outlined,
.material-icons.material-icons--outlined {
font-family: ''Material Icons Outlined'';
}
.material-icons-two-tone,
.material-icons.material-icons--two-tone {
font-family: ''Material Icons Two Tone'';
}
.material-icons-round,
.material-icons.material-icons--round {
font-family: ''Material Icons Round'';
}
.material-icons-sharp,
.material-icons.material-icons--sharp {
font-family: ''Material Icons Sharp'';
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="original">
<h2>Baseline</h2>
<i class="material-icons">home</i>
<i class="material-icons">assignment</i>
</section>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons-outlined">home</i>
<i class="material-icons material-icons--outlined">assignment</i>
</section>
<section id="two-tone">
<h2>Two tone</h2>
<i class="material-icons-two-tone">home</i>
<i class="material-icons material-icons--two-tone">assignment</i>
</section>
<section id="rounded">
<h2>Rounded</h2>
<i class="material-icons-round">home</i>
<i class="material-icons material-icons--round">assignment</i>
</section>
<section id="sharp">
<h2>Sharp</h2>
<i class="material-icons-sharp">home</i>
<i class="material-icons material-icons--sharp">assignment</i>
</section>
</body>
</html>
O verlo en codepen.io/Chan4077/pen/bZNyQG
EDITAR: A partir del 10 de marzo de 2019, parece que ahora hay clases para los nuevos íconos de fuentes:
body {
font-family: Roboto, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="original">
<h2>Baseline</h2>
<i class="material-icons">home</i>
<i class="material-icons">assignment</i>
</section>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons-outlined">home</i>
<i class="material-icons-outlined">assignment</i>
</section>
<section id="two-tone">
<h2>Two tone</h2>
<i class="material-icons-two-tone">home</i>
<i class="material-icons-two-tone">assignment</i>
</section>
<section id="rounded">
<h2>Rounded</h2>
<i class="material-icons-round">home</i>
<i class="material-icons-round">assignment</i>
</section>
<section id="sharp">
<h2>Sharp</h2>
<i class="material-icons-sharp">home</i>
<i class="material-icons-sharp">assignment</i>
</section>
</body>
</html>
EDITAR # 2: Aquí hay una solución para tintar íconos de dos tonos usando filtros de imagen CSS (código adaptado de este comentario ):
body {
font-family: Roboto, sans-serif;
}
.material-icons-two-tone {
filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
font-size: 48px;
}
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
color: #0099ff;
font-size: 48px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="original">
<h2>Baseline</h2>
<i class="material-icons">home</i>
<i class="material-icons">assignment</i>
</section>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons-outlined">home</i>
<i class="material-icons-outlined">assignment</i>
</section>
<section id="two-tone">
<h2>Two tone</h2>
<i class="material-icons-two-tone">home</i>
<i class="material-icons-two-tone">assignment</i>
</section>
<section id="rounded">
<h2>Rounded</h2>
<i class="material-icons-round">home</i>
<i class="material-icons-round">assignment</i>
</section>
<section id="sharp">
<h2>Sharp</h2>
<i class="material-icons-sharp">home</i>
<i class="material-icons-sharp">assignment</i>
</section>
</body>
</html>
O verlo en Codepen
Algo hilarantemente, Google ha creado una fuente que funciona correctamente en Safari pero no en Chrome. Aquí está el https://codepen.io/anon/pen/zbavza
<i class="material-icons-round red">warning</i>
En referencia a https://.com/a/54902967/4740291 y no poder cambiar el color usando css.
La edición reciente de Aj334 funciona perfectamente.
google CDN
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Elemento de icono
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
Lo que funcionó para mí es usar _outline no _outline d después del nombre del icono.
<mat-icon>info</mat-icon>
vs
<mat-icon>info_outline</mat-icon>
No estaba satisfecho con el hecho de que hasta que Google no haya publicado sus nuevos diseños como fuente o conjunto de iconos svg. Por lo tanto, armé un pequeño paquete npm para resolver el problema.
https://www.npmjs.com/package/ts-material-icons-svg
Simplemente importe los iconos que quiera usar y agréguelos a su registro. Esto también es compatible con la agitación de árboles, ya que solo se agregan a su proyecto los iconos que realmente desea y / o necesita.
npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git
utilizar dos iconos de tono, por ejemplo,
import {icon_edit} from ''ts-material-icons-svg/dist/twotone'';
matIconRegistry.addSvgIcon(
''edit'',
domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
);
En tu plantilla html ahora puedes usar el nuevo icono
<mat-icon svgIcon="edit"></mat-icon>
Probablemente, los nuevos temas no sean (¿ya?) Parte de la fuente Material Icons. https://github.com/google/material-design-icons/issues/773
Si ya tiene iconos de material trabajando en su proyecto web, solo necesita actualizar su referencia en el archivo html y la clase utilizada para los iconos:
referencia html:
antes de
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
Después
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />
iconos de material de clase:
Después de eso solo marque qué nombre de clase está usando:
Antes de:
<i className="material-icons">weekend</i>
Después:
<i className="material-icons-outlined">weekend</i>
Eso funciona para mi ... Pura vida!
Terminé usando la aplicación IcoMoon para crear una fuente personalizada usando solo los nuevos íconos temáticos que requerí para una compilación de aplicaciones web reciente. No es perfecto, pero puedes imitar la funcionalidad de fuente de Google existente bastante bien con un poco de configuración. Aquí hay una reseña:
Si alguien se siente atrevido, podría convertir todo el tema utilizando IcoMoon. Demonios, es probable que IcoMoon tenga un proceso interno que lo facilitaría, ya que ya tienen los Íconos de Material originales establecidos en su biblioteca.
De todos modos, esta no es una solución perfecta, pero funcionó para mí.