Animated Mat Icon

A simple lightweight package for animating angular mat icons

Installation

Using npm

npm install animated-mat-icon --save

Using yarn

yarn add animated-mat-icon

Setup & Usage

To access <animated-mat-icon> in the app, you need to import AnimatedMatIconModule in the module.

...
import { AnimatedMatIconModule } from 'animated-mat-icon';
...

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        AnimatedMatIconModule,
        ...
    ],
    providers: [
        ...
    ],
})

export class YourModule {}

After that, you can use the animated-mat-icon in the template.

<animated-mat-icon animation="heart-beat" icon="favorite"></animated-mat-icon>

Inputs

Name	Type	Default	optional	Description
animation	string		false	Specify the animation name that you want to set on the icon
icon	string		false	Specify the icon you want (Note: You can use any mat-icon)
onHover	booelan	false	true	If you set this true, then the animation will happen only when you hover on top of the icon
color	string	black	true	Set this to the desired color (Note: Any css color can be applied)
size	string		true	Set this to the desired size (Note: Any css size like px, %, em can be applied, remember to use the same css format)

Animations

Note: You can use any icons with any of these animations

move-to-right

<animated-mat-icon animation="move-to-right" icon="arrow_right_alt"></animated-mat-icon>

cross

<animated-mat-icon animation="cross" icon="clear"></animated-mat-icon>

diagonal-pulse

<animated-mat-icon animation="diagonal-pulse" icon="call_received"></animated-mat-icon>

refresh

<animated-mat-icon animation="refresh" icon="refresh"></animated-mat-icon>

heart-beat

<animated-mat-icon animation="heart-beat" icon="favorite"></animated-mat-icon>

roll-back

<animated-mat-icon animation="roll-back" icon="loop"></animated-mat-icon>

italic-deform

<animated-mat-icon animation="italic-deform" icon="clear_all"></animated-mat-icon>

winding

<animated-mat-icon animation="winding" icon="settings"></animated-mat-icon>

wrench

<animated-mat-icon animation="wrench" icon="build"></animated-mat-icon>

mouse-click

<animated-mat-icon animation="mouse-click" icon="mouse"></animated-mat-icon>

brush

<animated-mat-icon animation="brush" icon="brush"></animated-mat-icon>

lock

<animated-mat-icon animation="lock" icon="lock"></animated-mat-icon>

unlock

<animated-mat-icon animation="unlock" icon="lock_open"></animated-mat-icon>

hourglass

<animated-mat-icon animation="hourglass" icon="hourglass_full"></animated-mat-icon>

write

<animated-mat-icon animation="write" icon="create"></animated-mat-icon>

rocket

<animated-mat-icon animation="rocket" icon="airplanemode_active"></animated-mat-icon>

left-right

<animated-mat-icon animation="left-right" icon="swap_horiz"></animated-mat-icon>