¿Qué es Angular Material?
Angular Material Icons es una biblioteca de iconos diseñada específicamente para Angular y basada en Material Design. Esta biblioteca proporciona una amplia gama de iconos listos para usar, lo que permite a los desarrolladores agregar fácilmente elementos visuales a sus aplicaciones web. En este artículo, exploraremos cómo instalar Angular Material Icons y cómo implementarlos en tus proyectos de Angular.
Si tienes otros iconos, lo quieres hacer con imágenes, o sin más tienes otra librería, puedes saltarte el paso previo de la instalación de Angular Material.
¿Cómo instalar Angular Material?
Antes de comenzar a utilizar Angular Material Icons, debes asegurarte de tener una aplicación de Angular configurada y en funcionamiento. Si aún no tienes Angular instalado, te que visites el siguiente post (Instalar Angular 15 desde cero) para que sigas las instrucciones detalladas sobre cómo crear un nuevo proyecto de Angular.
Una vez que tienes tu proyecto de Angular listo, puedes instalar Angular Material Icons utilizando el administrador de paquetes npm. Abre una terminal y navega hasta el directorio de tu proyecto. Luego, ejecuta el siguiente comando:
npm install @angular/material
¿Cómo implemetar Angular Material en tu proyecto?
Una vez que la instalación se haya completado con éxito, es hora de comenzar a implementar los iconos en tu aplicación Angular. Sigue estos pasos:
Paso 1: Importar el módulo
app.module.ts
y agrega la siguiente importación:
import { MatIconModule } from '@angular/material/icon';
imports
el módulo MatIconModule
.Paso 2: Usar los iconos
Ahora que has registrado tus iconos, puedes utilizarlos en cualquier componente de tu aplicación. Para hacerlo, simplemente agrega el siguiente código en tu archivo de plantilla HTML. Te dejo el enlace del catálogo de iconos de Material con su código.
bolt
Añadir animaciones a nuestros iconos
Animación de satisfactorio
HTML
check_circle
SASS
.success-icon
animation: success 1s ease 0s 1 normal forwards
font-size: 5em
color: #006400
margin-right: 1em
background-color:white
@keyframes success
0%
transform: scale(1)
20%
transform: scale(0.9)
40%
transform: scale(1.1)
60%
transform: scale(0.95)
80%
transform: scale(1.05)
100%
transform: scale(1)
Animación de advertencia
HTML
error
SASS
.warning-icon
animation: warning 1s ease 0s 1 normal forwards
font-size: 5em
color: #b67c00d8
margin-right: 1em
@keyframes warning
0%, 100%
transform: translateX(0%)
transform-origin: 50% 50%
15%
transform: translateX(-30px) rotate(-6deg)
30%
transform: translateX(15px) rotate(6deg)
45%
transform: translateX(-15px) rotate(-3.6deg)
60%
transform: translateX(9px) rotate(2.4deg)
75%
transform: translateX(-6px) rotate(-1.2deg)
Animación de fallido
HTML
cancel
SASS
.failure-icon
animation: failure 1s ease 0s 1 normal forwards
font-size: 5em
color: #b60600d8
@keyframes failure
0%
animation-timing-function: ease-in
opacity: 1
transform: translateY(-45px)
24%
opacity: 1
40%
animation-timing-function: ease-in
transform: translateY(-24px)
65%
animation-timing-function: ease-in
transform: translateY(-12px)
82%
animation-timing-function: ease-in
transform: translateY(-6px)
93%
animation-timing-function: ease-in
transform: translateY(-4px)
25%, 55%, 75%, 87%
animation-timing-function: ease-out
transform: translateY(0px)
100%
animation-timing-function: ease-out
opacity: 1
transform: translateY(0px)
¿Te ha gustado el artículo?
Muchas gracias por visitar mi blog 😉 Te agradecería que si te ha resultado útil, que lo compartas con tus amigos.
Más abajo te dejo mas artículos relacionados y que te puedan resultar útiles para tu proyecto.
Instalar Angular 15 desde cero
¿Qué es Angular? Angular es un framework de desarrollo web de código abierto desarrollado y mantenido por Google. Se utiliza para construir aplicaciones web de
Convertir base64 a PDF, Excel o Word con Angular
En este POST vamos a ver cómo podemos convertir un elemento de base64 a su fichero correspondiente (base64 a PDF,base64 a Excel,base64 a Word,…etc). ¿Qué