How to use/enable animated icons?

Question

Does anybody know how to use/enable the animated icons in an Angular Web Application which are shown in the material design documentation: https://material.io/design/iconography/animated-icons.html#usage

Answer 1

As other have stated the examples on the Material Icon sites would have to be built.

However, I found my way to this question looking for a guide on how to animate angular material icons and for others looking for the same I have a solution. The default animation can be customized to something other than just a 360 degree rotation.

Basically you can create a component that swaps between mat-icon's when clicked or when a parent element like a button is clicked.

Prerequisites are you have a an angular material application with material icons installed. I used Angular Material 8.

Here is a working Stackblitz https://stackblitz.com/edit/angular-material-prototype-animated-icon

mat-animated-icon.component.ts

import { Component, Input, OnInit } from '@angular/core';  @Component({   selector: 'mat-animated-icon',   templateUrl: './mat-animated-icon.component.html',   styleUrls: ['./mat-animated-icon.component.scss'] }) export class MatAnimatedIconComponent implements OnInit {    @Input() start: String;   @Input() end: String;   @Input() colorStart: String;   @Input() colorEnd: String;   @Input() animate: boolean;   @Input() animateFromParent?: boolean = false;    constructor() { }    ngOnInit() {     console.log(this.colorStart);     console.log(this.colorEnd);   }    toggle() {     if(!this.animateFromParent) this.animate = !this.animate;   }  } 

mat-animated-icon.component.scss

:host {   font-family: 'Material Icons';   font-weight: normal;   font-style: normal;   font-size: 24px;  /* Preferred icon size */   display: inline-block;   line-height: 1;   text-transform: none;   letter-spacing: normal;   word-wrap: normal;   white-space: nowrap;   direction: ltr;    /* Support for all WebKit browsers. */   -webkit-font-smoothing: antialiased;   /* Support for Safari and Chrome. */   text-rendering: optimizeLegibility;    /* Support for Firefox. */   -moz-osx-font-smoothing: grayscale;    /* Support for IE. */   font-feature-settings: 'liga';    /* Rules for sizing the icon. */   &.md-18 { font-size: 18px; }   &.md-24 { font-size: 24px; }   &.md-36 { font-size: 36px; }   &.md-48 { font-size: 48px; }    /* Rules for using icons as black on a light background. */   &.md-dark {      color: rgba(0, 0, 0, 0.54);      &.md-inactive { color: rgba(0, 0, 0, 0.26); }   }    /* Rules for using icons as white on a dark background. */   &.md-light {      color: rgba(255, 255, 255, 1);      &.md-inactive { color: rgba(255, 255, 255, 0.3); }   }    .material-icons {     transition: transform .5s;     &.animate {       transform: rotate(360deg);     }   } } 

mat-animated-icon.component.html

<mat-icon [ngClass]="{'animate' : animate}" color="{{animate ? colorEnd : colorStart}}" (click)="toggle()">{{animate ? end : start}}</mat-icon> 

var.directive.ts

a little helper directive

import { Directive, Input } from '@angular/core';  @Directive({   selector: '[var]',   exportAs: 'var' }) export class VarDirective {    @Input() var:any;    constructor() { }  } 

Example of the component in use

<button (click)="!this.disabled && iconAnimate10.var=!iconAnimate10.var" #iconAnimate10="var" var="'false'" mat-icon-button [disabled]="false" aria-label="Example icon-button with a heart icon"> <mat-animated-icon start="menu" end="close" colorStart="none" colorEnd="none" [animate]="iconAnimate10.var" animateFromParent="true"></mat-animated-icon>