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>