npm i glyphflow

import { Component } from '@angular/core';
import { GfIconComponent, bellIcon } from 'glyphflow';

@Component({
  selector: 'app-alert',
  imports: [GfIconComponent],
  template: '<gf-icon [iconDef]="bell" [size]="24" label="Notifications" />',
})
export class Alert {
  protected readonly bell = bellIcon;
}

import { provideIconCatalog, ANIMATED_ICONS } from 'glyphflow';

bootstrapApplication(App, {
  providers: [provideIconCatalog(ANIMATED_ICONS)],
});

import { provideGfIcons } from 'glyphflow';

providers: [provideGfIcons({ durationScale: 0.8 })]

import { GfIconMorphComponent } from 'glyphflow/morph';

// The binding IS the state: changing [icon] triggers the transition from the previous value.
// <gf-icon-morph [icon]="current()" [size]="32" label="Status" />