A simple lightweight package for animating angular mat icons
npm install animated-mat-icon --saveyarn add animated-mat-iconTo 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>| 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) |
Note: You can use any icons with any of these animations
<animated-mat-icon animation="move-to-right" icon="arrow_right_alt"></animated-mat-icon>
<animated-mat-icon animation="cross" icon="clear"></animated-mat-icon>
<animated-mat-icon animation="diagonal-pulse" icon="call_received"></animated-mat-icon>
<animated-mat-icon animation="refresh" icon="refresh"></animated-mat-icon>
<animated-mat-icon animation="heart-beat" icon="favorite"></animated-mat-icon>
<animated-mat-icon animation="roll-back" icon="loop"></animated-mat-icon>
<animated-mat-icon animation="italic-deform" icon="clear_all"></animated-mat-icon>
<animated-mat-icon animation="winding" icon="settings"></animated-mat-icon>
<animated-mat-icon animation="wrench" icon="build"></animated-mat-icon>
<animated-mat-icon animation="mouse-click" icon="mouse"></animated-mat-icon>
<animated-mat-icon animation="brush" icon="brush"></animated-mat-icon>
<animated-mat-icon animation="lock" icon="lock"></animated-mat-icon>
<animated-mat-icon animation="unlock" icon="lock_open"></animated-mat-icon>
<animated-mat-icon animation="hourglass" icon="hourglass_full"></animated-mat-icon>
<animated-mat-icon animation="write" icon="create"></animated-mat-icon>
<animated-mat-icon animation="rocket" icon="airplanemode_active"></animated-mat-icon>
<animated-mat-icon animation="left-right" icon="swap_horiz"></animated-mat-icon>