Cómo usar iconos personalizados en material angular

Si está buscando usar íconos personalizados en Angular Material, hay algunos pasos que deberá seguir. Primero, deberá crear su propio conjunto de iconos. Angular Material viene con un conjunto de íconos integrados, pero también puedes crear los tuyos propios. Una vez que tenga sus íconos, deberá registrarlos con Angular Material. Esto se puede hacer en el archivo de módulo de su aplicación. Una vez que sus íconos estén registrados, puede usarlos como los íconos integrados. Puede usarlos en su marcado o puede acceder a ellos mediante programación. ¡Eso es todo lo que hay que hacer para usar íconos personalizados en Angular Material! Siguiendo estos pasos, puede agregar fácilmente sus propios íconos a Angular Material para usarlos en sus aplicaciones.

En este tutorial, usaremos el componente >mat-icon> para crear la fuente Material Icons. El componente se utilizará además de admitir un icono sva personalizado. En GitHub, puede encontrar el código de trabajo completo. Esta publicación es para aquellos que solo están aprendiendo Angular v4.2+. El material de Angular para este tutorial se escribió originalmente en Angular 5.2 y Angular 10.1. El icono que usaremos en este tutorial (que se asemeja a una cara con una sonrisa) es el icono de estado de ánimo. Además de una lista completa de íconos de materiales, el sitio web de Material Design ofrece una variedad de estilos de íconos que se pueden usar solos.

Ahora podemos usar el ícono del mouse para mostrar los SVG. Al ingresar una etiqueta en la propiedad de entrada de un archivo .html, puede usar la etiqueta del icono para especificar a qué icono se accede. La URL debe ser https://app.html. Echemos un vistazo a lo que está disponible actualmente. Cuando mire la aplicación en su navegador, notará que el ícono personalizado tiene un estilo en Material. Mover MatIconRegistry a una clase de servicio lo ayudará a mantener y limpiar el código.

¿Cómo uso los iconos Svg en Angular 12?

Para usar íconos SVG en Angular 12, deberá instalar los paquetes @angular/material y @angular/material-extensions. Luego puede usar el servicio matIconRegistry para registrar los íconos y agregarlos a sus componentes.

Puede administrar el código en Angular2 usando su archivo Icon.svg como su separado. Además, se puede usar el módulo ng-inline-svg (o, si es posible, otros enfoques similares) para hacer esto. Como resultado, es esencialmente algo en el medio: tendrá archivos separados para cada tipo de imagen, con las imágenes en línea cuando se carga la página para que pueda manipularlas usando JS/CSS.

El uso de aria-describedby como parte de su SVG permitirá a los usuarios con discapacidades tener una mejor experiencia al usar su sitio web. Como resultado, cuando describa sus íconos con aria-descrito por, podrá asegurarse de que los usuarios con discapacidades puedan entender lo que representan.

El debate de png vs. Iconos SVG

Por otro lado, también se puede agregar un canal alfa a un archivo SVG. En otras palabras, debido a que se pueden incluir en áreas transparentes conservando un poco de color, los íconos SVG son más versátiles que los íconos PNG . La elección de qué archivo usar para sus íconos se reduce a su proyecto específico y sus necesidades.

¿Cómo utilizo iconos Svg personalizados en Html?

Para usar íconos SVG personalizados en HTML, debe incluir la ruta del archivo del ícono en el atributo href del elemento del ícono. La ruta del archivo debe ser relativa al directorio raíz de la página. Por ejemplo, si el ícono está en una carpeta llamada “íconos” en el directorio raíz, la ruta del archivo sería “íconos/ícono.svg”.

Desde la introducción de herramientas en línea como Icomoon y Fontello, las fuentes web se han vuelto mucho más fáciles de crear. Con HTML5, tenemos acceso a una gama mucho más amplia de íconos, gracias a Scalable Vector Graphics. Si desea brindar soporte técnico a Explorer 8, existen algunas opciones simples de respaldo. El identificador de un fragmento es una propiedad SVG integrada. Podemos hacer referencia a un fragmento si queremos usar una especificación de vista SVG o abordar una matriz. Este elemento es un elemento SVG basado en su ID de >vista>. Para mostrar solo el caballo negro de este sprite de pieza de ajedrez (de Wikipedia Commons), debe detectar valores tal como lo haría en el siguiente esquema.

Usando la etiqueta img para definir la imagen, la técnica funciona bien con Firefox, Chrome, Safari (escritorio) y Opera. Alternativamente, puede usar un archivo SVG externo para crear sprites CSS, como se muestra en la imagen a continuación. Esta es una técnica de fabricación confiable y lista para usar. Lo probé en una variedad de los principales navegadores (incluido IE8) y funcionó perfectamente. Los iconos aparecen en la pantalla como la etiqueta. Una vez más, Icomoon se puede usar para crear la colección de etiquetas de símbolos manualmente, o puede usar algún complemento de Grunt (google para la combinación de SVG de Grunt) para hacerlo. A excepción de IE9, este método se puede utilizar con todos los principales navegadores. Incluso la solución de Jonathan Neal, SVG4everybody, puede usarse para resolver este problema.

A menos que el código fuente especifique el atributo de ancho deseado, una imagen sva no se muestra en el navegador Chrome. Si el SVG no tiene este atributo, el navegador hará que la imagen sea más grande o más pequeña.

Cómo usar imágenes Svg en su página web

Puede insertar imágenes SVG directamente en HTML usando la etiqueta svg> /svg>. Se puede acceder a la imagen SVG en el código VS o en su IDE preferido copiando el código y pegándolo dentro del elemento del cuerpo de su documento HTML. Si todo salió bien, su página web se vería exactamente como la que se muestra aquí.
Los iconos se pueden crear con imágenes SVG simplemente escribiendo su nombre en un navegador web. Se puede incrustar HTML en ellos y se pueden instalar versiones almacenadas en caché. La evidencia también es prometedora para el futuro. Los iconos deben crearse con PNG o interfaces gráficas escalables (SVG).

Lista de iconos Svg de material angular

La biblioteca de materiales angulares proporciona un conjunto de componentes de interfaz de usuario reutilizables, bien probados y accesibles basados ​​en la especificación de diseño de materiales de Google. Una de las características de la biblioteca es la capacidad de usar íconos SVG como íconos de materiales. El conjunto de íconos de material angular incluye una amplia variedad de íconos, incluidos íconos de redes sociales, íconos de tipo de archivo y flechas. Puede explorar la lista completa de íconos de material angular en el sitio de íconos de material.

Los iconos se pueden mostrar usando el componente Mat-Icon de Angular Material. La característica principal de este componente es la capacidad de mostrar imágenes utilizando fuentes web como Font-awesome, que simplemente requiere el nombre de la imagen que necesita. ¿Qué sucede con los íconos que no pertenecen a las fuentes web? En el ícono, ¿le gustaría hacer cambios (por ejemplo, el color al pasar el mouse por encima o el estado del botón en una ubicación específica) en tiempo de ejecución? El siguiente error aparece después de abrir la sección de la consola del navegador. Cuando se usa el contexto de la URL del recurso, se usa el valor no seguro. La definición de la URL como un parámetro se usa para eludirSecurityTrustResourceUrl, lo que evita que un atacante inyecte una URL maliciosa como esta, consulte la documentación oficial de DomSanitizer.

Veremos un método mejor más adelante, pero ahora, simplemente los colocaremos en la página app.html. Agregue una clase en la etiqueta HTML mat-icon como se describe arriba. Cuando un usuario pasa el cursor sobre el icono, el color de la imagen cambia como resultado del SCSS. Los íconos ahora deberían cambiar de color al pasar el mouse sobre ellos. Como parte de una publicación futura, buscaremos mejorar esto y refactorizar para permitir que los íconos se carguen usando un servicio.

Cómo utilizar iconos de material angular

¿Dónde puedo encontrar iconos de materiales angulares?
Lo único que debe hacer es usar las siguientes fuentes web de Google CSS en su código HTML. Los íconos de materiales se pueden encontrar en un solo archivo (42 KB) y su tamaño varía de grande a pequeño. Los iconos se dividen en diez categorías diferentes que puedes ver en el repositorio de Git. Los iconos también se pueden alojar en su propio servidor.
¿Cuáles son algunos de los buenos sitios para ver íconos de materiales?
Hemos compilado los íconos de Material en un repositorio de Git, que incluye todos los formatos en los que estamos disponibles.
¿Cuál es la mejor manera de personalizar mi icono?
El elemento de clase debe agregarse a la etiqueta HTML mat-icon, como se muestra arriba. Agregar el SCSS a la clase cambia el color del ícono cada vez que un usuario pasa el mouse sobre él. Al pasar el cursor sobre los íconos, ahora deberían cambiar de color.

Cómo utilizar iconos de material angular

Los íconos de Angular Material son SVG que se pueden usar dentro de su aplicación Angular. Para usar un icono, simplemente agregue la clase de icono a un elemento. Por ejemplo, para usar el ícono de círculo de cuenta, agregaría la clase mat-icon-account-circle a un elemento.

Tenemos bibliotecas de materiales en angular que se pueden usar para diseñar rápidamente nuestra aplicación y tener las etiquetas de compilación asignadas. La biblioteca de materiales contiene un ícono de tapete, que es necesario para mostrarnos íconos. En las siguientes secciones, aprenderemos cómo instalar las bibliotecas requeridas y cómo implementar esto para mostrar íconos en nuestra aplicación. Nuestro primer servicio es MatIconRegistry, que es un registro que nos permite identificar y definir alias para íconos usando un servicio que es inyectable. El icono es muy sencillo de usar, pero requiere que esta directiva sea importada al proyecto o módulo raíz donde pretendemos mostrarlo. Inicie el comando mencionado anteriormente en su símbolo del sistema para crear un nuevo proyecto angular. Pruebe uno de los comandos enumerados a continuación para asegurarse de que todas las bibliotecas necesarias estén instaladas en nuestro proyecto. Esto es especialmente cierto para los desarrolladores, que pueden usar la biblioteca y el módulo directamente en nuestra aplicación sin tener que lidiar con los pasos de agregar la biblioteca y el módulo al módulo raíz.

Mat-icon Svg

Un mat- icon svg es un gráfico vectorial simple que se puede utilizar para representar un icono o un logotipo. El gráfico se puede cambiar de tamaño sin perder calidad y se puede editar o cambiar fácilmente.

Usando el componente mat-ion de materiales angulares, podemos generar SVG locales. Estamos inyectando el servicio MatIconRegistry y DomSanitizer en el constructor. La función registerIcons() incluye los parámetros load y URL, así como una función privada llamada load. Si usamos esta variación, solo necesitaremos agregar el nombre del archivo de imagen. Si está utilizando una cadena, la función de carga icon.service es ligeramente diferente. El nombre de la imagen se generará utilizando el índice como clave para el nombre de la imagen en la función de carga. Este servicio ahora debe activarse cuando la aplicación comience a cargarse. Es mucho más fácil leer y mantener el código porque es mucho más legible. Hemos dividido las imágenes en secciones separadas y se ha implementado un servicio más simple.