Crear iconos animados de Angular Material

Facebook
Twitter
LinkedIn
WhatsApp

¿Qué es Angular Material?

Crear iconos animados de Angular Material 3

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

Abre el archivo app.module.ts y agrega la siguiente importación:
				
					import { MatIconModule } from '@angular/material/icon';
				
			
También añade a 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.

				
					<mat-icon>bolt</mat-icon>
				
			

Añadir animaciones a nuestros iconos

iconos animados Angular Material

Animación de satisfactorio

HTML

				
					<mat-icon class="success-icon">check_circle</mat-icon> 
				
			

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)
				
			
iconos animados Angular Material

Animación de advertencia

HTML

				
					<mat-icon class="warning-icon">error</mat-icon> 
				
			

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)
				
			
iconos animados Angular Material

Animación de fallido

HTML

				
					<mat-icon class="failure-icon">cancel</mat-icon>  
				
			

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.

Facebook
Twitter
LinkedIn
WhatsApp
Crear iconos animados de Angular Material 8

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

Facebook
Twitter
LinkedIn

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio