How to use/enable animated icons?
Solution 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>
Solution 2
There is library that easy animate angular. https://github.com/filipows/angular-animations
I just used that on angular 8 to animate favorite icons, it's very straightforward.
This example makes full star into empty star and vice versa.
Compount:
import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';
@Component({animations: [
fadeInOnEnterAnimation(),
fadeOutOnLeaveAnimation()
]})
public toggleFavorite() {
this.isFavorite = !this.isFavorite;
}
html:
<div style="display: grid;" id="favoriteContainer" (click)=toggleFavorite() matTooltip="Favorite" >
<mat-icon style="grid-column: 1;grid-row: 1;" *ngIf="!isFavorite" [@fadeInOnEnter] [@fadeOutOnLeave]>star_border</mat-icon>
<mat-icon style="grid-column: 1;grid-row: 1;" *ngIf="isFavorite" [@fadeInOnEnter] [@fadeOutOnLeave]>star</mat-icon>
</div>
Solution 3
With the help of @Remy, I done a working example
- first install this package
npm i angular-animations --save
- then import the
BrowserAnimationsModule
inside your parent module imports
<mat-icon matListIcon class="menu-item-icon" *ngIf="themeService.isDark();" [@fadeInOnEnter]>dark_mode</mat-icon>
<mat-icon matListIcon class="menu-item-icon" *ngIf="themeService.isLight();" [@fadeInOnEnter]>light_mode</mat-icon>
<mat-slide-toggle [checked]="themeService.isDark()" (change)="$event.checked ? setDarkTheme() : setLightTheme()"></mat-slide-toggle>
TS file
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';
@Component({
selector: 'app-user-menu',
templateUrl: './user-menu.component.html',
styleUrls: ['./user-menu.component.scss'],
animations: [
fadeInOnEnterAnimation(),
]
})
export class UserMenuComponent implements OnInit, OnDestroy {
constructor() {}
}
Output
Solution 4
You could implement through a component using icons. Implement a component which contains array for icons then swap the icons regular interval. Each icon represent a state/image.
For eg : Use following icons in an array then swap it every every 100ms.
- https://fontawesome.com/v4.7.0/icon/pencil
- https://fontawesome.com/v4.7.0/icon/pencil-square-o
- https://fontawesome.com/v4.7.0/icon/pencil-square
Update:
Refer to Animate Font Awesome icons in Angular article.
Forked from above https://stackblitz.com/edit/animated-icons-angular-forked
Related videos on Youtube
Comments
-
Leonzen about 3 years
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
-
Reactgular almost 6 yearsThose animations are examples and not part of the specification. They're just showing you what you could do yourself.
-
-
Amirreza over 5 yearsand that's the problem, there is no clean guide line or helping tools to animate icons
-
Valentine Bondar over 2 yearsCould you help fix the error in your stackblitz, I want to learn from it, but I can't get it to go! I keep getting
Error: ENOENT: No such file or directory., '/dev/null'
when it starts up the server