@mal-icons/angular

Angular adapter for mal-icons — a high-performance, tree-shakeable icon SDK. Each icon is a pre-generated standalone Angular component that renders SVG through Renderer2 with OnPush change detection.

Highlights

• Standalone components — import an icon directly, no NgModule needed.
• OnPush — minimal change-detection overhead.
• Tree-shakeable — every icon is its own component.
• Themeable — dependency-injection context (ICON_CONTEXT) with per-icon overrides.
• Accessible — correct role / aria-hidden and optional <title>.

Installation

bun add @mal-icons/angular
# or
npm install @mal-icons/angular

Requires @angular/core 16 or newer (peer dependency). The package ships TypeScript source, so it compiles in your app's Angular version.

Quick start

Import the standalone component and use its selector in a template:

import { Component } from "@angular/core";
import { FiActivity } from "@mal-icons/angular/fi";

@Component({
  standalone: true,
  selector: "app-status",
  imports: [FiActivity],
  template: `<mal-fi-activity [size]="24" title="Status" />`,
})
export class StatusComponent {}

The selector is the kebab-cased icon name prefixed with mal- (e.g. FiActivity → <mal-fi-activity>).

App-wide theming

Provide ICON_CONTEXT to set defaults for all descendant icons; per-icon inputs override them:

import { ICON_CONTEXT } from "@mal-icons/angular";

bootstrapApplication(AppComponent, {
  providers: [
    { provide: ICON_CONTEXT, useValue: { size: 20, color: "#3366ff" } },
  ],
});

Inputs

| Input | Type | Description | | ----------- | ------------------ | ------------------------------------ | | size | number \| string | Width and height (defaults to 1em) | | color | string | Overrides currentColor | | title | string | Accessible label | | className | string | Additional class names |

API

import {
  IconBaseComponent,
  ICON_CONTEXT,
  DefaultIconContext,
  ICON_ANIMATIONS_CSS,
  WEIGHT_STROKE_WIDTH,
  animationClass,
} from "@mal-icons/angular";

Icons

The bundled icon sets, their upstream licenses, pinned versions, and counts:

| Icon Library | License | Version | Count | | ---------------------------------------- | --------------------------------------------------------------------------------- | ------- | ----: | | Circum Icons | MPL-2.0 license | 2.0.2 | 288 | | Feather | MIT license | 4.29.0 | 287 | | Ionicons | MIT license | 8.0.13 | 1357 |

Subpath exports

| Import | Contents | | ---------------------------------- | ------------------------------ | | @mal-icons/angular | Base component and context | | @mal-icons/angular/ci | All Circum icon components | | @mal-icons/angular/ci/CiHeart | A single Circum icon component | | @mal-icons/angular/fi | All Feather icon components | | @mal-icons/angular/fi/FiActivity | A single icon component | | @mal-icons/angular/io | All Ionicons components | | @mal-icons/angular/io/IoHeart | A single Ionicons component |

Example

A Vite + Angular 22 gallery (standalone components, signals, NgComponentOutlet) lives in examples/angular.

Repository

https://github.com/mal-icons/mal-icons · package directory packages/angular.

License

MIT © MALDevs