@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.

Use with AI agents

AI coding agents can add and theme these icons for you via the mal-icons agent skill. Install it with the skills CLI:

npx skills add mal-icons/mal-icons

Then ask your agent to "add a trash icon" and it searches the catalog and writes the correct @mal-icons/angular import. See the Angular setup guide.

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 | | multicolor | boolean | Keep the icon's own colors (omits the currentColor stroke/fill defaults) | | 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 | | ---------------------------------------- | --------------------------------------------------------------------------------- | ------- | ----: | | Ant Design Icons | MIT license | 4.0.0 | 420 | | Bootstrap Icons | MIT license | 1.13.1 | 2078 | | Boxicons Logos | CC BY 4.0 license | 2.1.4 | 155 | | Boxicons Regular | CC BY 4.0 license | 2.1.4 | 814 | | Boxicons Solid | CC BY 4.0 license | 2.1.4 | 665 | | Circum Icons | MPL-2.0 license | 2.0.2 | 288 | | Codicons | CC BY 4.0 license | 0.0.46 | 604 | | css.gg | MIT license | 2.1.1 | 704 | | Devicons | MIT license | 2.0.1 | 1725 | | Feather | MIT license | 4.29.0 | 287 | | Flat Color Icons | CC BY 4.0 license | 1.0.2 | 312 | | Font Awesome Free | CC BY 4.0 license | 6.7.2 | 1402 | | Font Awesome Free Brands | CC BY 4.0 license | 6.7.2 | 495 | | Font Awesome Free Regular | CC BY 4.0 license | 6.7.2 | 163 | | Game Icons | CC BY 3.0 license | 82d9488 | 4180 | | Grommet | Apache 2.0 license | 4.14.0 | 637 | | Heroicons | MIT license | 2.2.0 | 324 | | Ionicons | MIT license | 8.0.13 | 1357 | | Line Awesome | MIT license | 1.2.1 | 1544 | | Lucide | ISC license | 1.19.0 | 1727 | | Material Icons Filled | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Rounded | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Sharp | Apache 2.0 license | 0.14.15 | 2122 | | Material Icons Two Tone | Apache 2.0 license | 0.14.15 | 2122 | | Material Symbols Outlined | Apache 2.0 license | 0.9.0 | 3004 | | Material Symbols Rounded | Apache 2.0 license | 0.9.0 | 3004 | | Material Symbols Sharp | Apache 2.0 license | 0.9.0 | 3004 |

| Octicons | MIT license | 19.28.1 | 733 | | Phosphor | MIT license | 2.0.8 | 1248 | | Radix Icons | MIT license | 0.0.17 | 318 | | Remix Icon | Apache 2.0 license | 4.6.0 | 3058 | | Simple Icons | CC0 1.0 license | 16.23.0 | 3442 | | Simple Line Icons | MIT license | 2.5.5 | 189 | | Tabler Icons | MIT license | 3.44.0 | 5093 | | Themify | SIL OFL 1.1 license | 9600186 | 352 | | Typicons | CC BY-SA 4.0 license | 2.1.2 | 336 | | Weather Icons | SIL OFL 1.1 license | 2.0.12 | 219 |

Subpath exports

| Import | Contents | | ---------------------------------- | ------------------------------ | | @mal-icons/angular | Base component and context | | @mal-icons/angular/ad | All Ant Design icon components | | @mal-icons/angular/ci | All Circum icon components | | @mal-icons/angular/dev | All Devicons icon components | | @mal-icons/angular/ad/AdHome | A single Ant Design icon component | | @mal-icons/angular/ci/CiHeart | A single Circum icon component | | @mal-icons/angular/dev/DevDreamhost | A single Devicons icon component | | @mal-icons/angular/fa | All Font Awesome icon components | | @mal-icons/angular/fab | All Font Awesome Brands icon components | | @mal-icons/angular/far | All Font Awesome Regular icon components | | @mal-icons/angular/fc | All Flat Color icon components | | @mal-icons/angular/fi | All Feather icon components | | @mal-icons/angular/gr | All Grommet icon components | | @mal-icons/angular/fa/FaHeart | A single icon component | | @mal-icons/angular/fab/FabGithub | A single icon component | | @mal-icons/angular/far/FarHeart | A single icon component | | @mal-icons/angular/fc/FcAbout | A single icon component | | @mal-icons/angular/fi/FiActivity | A single icon component | | @mal-icons/angular/gi/GiAce | A single icon component | | @mal-icons/angular/gr/GrHome | A single icon component | | @mal-icons/angular/io | All Ionicons components | | @mal-icons/angular/la | All Line Awesome components | | @mal-icons/angular/lu | All Lucide components | | @mal-icons/angular/mdf | All Material Icons Filled (named exports) | | @mal-icons/angular/mdr | All Material Icons Rounded (named exports) | | @mal-icons/angular/mds | All Material Icons Sharp (named exports) | | @mal-icons/angular/mdt | All Material Icons Two Tone (named exports) | | @mal-icons/angular/mso | All Material Symbols Outlined (named exports) | | @mal-icons/angular/msr | All Material Symbols Rounded (named exports) | | @mal-icons/angular/mss | All Material Symbols Sharp (named exports) | | @mal-icons/angular/oc | All Octicons components | | @mal-icons/angular/io/IoHeart | A single Ionicons component | | @mal-icons/angular/la/LaHeart | A single Line Awesome component | | @mal-icons/angular/lu/LuHeart | A single Lucide component | | @mal-icons/angular/oc/OcHeart16 | A single Octicons component | | @mal-icons/angular/ti | All Typicons components | | @mal-icons/angular/wi | All Weather Icons components | | @mal-icons/angular/ti/TiHeart | A single Typicons component | | @mal-icons/angular/wi/WiDaySunny | A single Weather Icons component | | @mal-icons/angular/hi | All Heroicons icons (named exports) | | @mal-icons/angular/hi/HiAcademicCap | A single Heroicons icon module | | @mal-icons/angular/sl | All Simple Line Icons icons (named exports) | | @mal-icons/angular/sl/SlActionRedo | A single Simple Line Icons icon module | | @mal-icons/angular/cg | All css.gg icons (named exports) | | @mal-icons/angular/cg/CgAbstract | A single css.gg icon module | | @mal-icons/angular/vsc | All Codicons icons (named exports) | | @mal-icons/angular/vsc/VscAccount | A single Codicons icon module | | @mal-icons/angular/tf | All Themify icons (named exports) | | @mal-icons/angular/tf/TfAgenda | A single Themify icon module | | @mal-icons/angular/rx | All Radix Icons icons (named exports) | | @mal-icons/angular/rx/RxAccessibility | A single Radix Icons icon module | | @mal-icons/angular/bs | All Bootstrap Icons icons (named exports) | | @mal-icons/angular/bs/BsAlarm | A single Bootstrap Icons icon module | | @mal-icons/angular/ri | All Remix Icon icons (named exports) | | @mal-icons/angular/ri/RiHome2Line | A single Remix Icon icon module | | @mal-icons/angular/si | All Simple Icons icons (named exports) | | @mal-icons/angular/si/SiGithub | A single Simple Icons icon module | | @mal-icons/angular/bx | All Boxicons Regular icons (named exports) | | @mal-icons/angular/bx/BxAbacus | A single Boxicons Regular icon module | | @mal-icons/angular/bxl | All Boxicons Logos icons (named exports) | | @mal-icons/angular/bxl/BxlGithub | A single Boxicons Logos icon module | | @mal-icons/angular/bxs | All Boxicons Solid icons (named exports) | | @mal-icons/angular/bxs/BxsHeart | A single Boxicons Solid icon module | | @mal-icons/angular/tb | All Tabler icons (named exports) | | @mal-icons/angular/tb/TbHeart | A single Tabler icon module | | @mal-icons/angular/ph | All Phosphor icons (named exports) | | @mal-icons/angular/ph/PhHeart | A single Phosphor icon module |

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