@kit-ng-ui/icons

SVG icon component + registry for Kit UI.

Install

pnpm add @kit-ng-ui/icons @kit-ng-ui/core

Use

import { Component } from '@angular/core';
import { KitIconComponent } from '@kit-ng-ui/icons';

@Component({
  standalone: true,
  imports: [KitIconComponent],
  template: `
    <kit-icon name="search" size="lg" />
    <kit-icon name="loading" spin />
    <kit-icon name="chevron-right" [rotate]="180" />
  `,
})
export class Demo {}

Built-in icons

loading, check, close, plus, minus, search, chevron-down, chevron-up, chevron-left, chevron-right, info, warning, error, success, sun, moon, github, copy.

Register custom icons

At bootstrap:

import { provideKitIcons } from '@kit-ng-ui/icons';

const heartIcon = {
  name: 'heart',
  viewBox: '0 0 24 24',
  body: '<path fill="currentColor" d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6c-2.5 4.5-9.5 9-9.5 9z"/>',
};

bootstrapApplication(AppComponent, {
  providers: [provideKitIcons([heartIcon])],
});

Or at runtime via KitIconRegistry.register(def).

Security model

KitIconComponent renders the registered SVG body via Angular's DomSanitizer.bypassSecurityTrustHtml for performance — re-sanitizing every icon on every render would dominate paint cost. To stay safe, every body goes through a regex allowlist at registration time (see svg-validator.ts). Rejected constructs include:

• <script>, <style>, <iframe>, <foreignObject>, <image>
• on* event handler attributes
• javascript: URLs
• href / xlink:href (external references blocked)
• Any element or attribute not on the explicit allowlist

Trust boundary. Callers MAY hand-author SVG fragments (the starter set does), MAY load fragments from a build-time-generated module, but MUST NOT pass strings sourced from user input, an untrusted API, or any other adversary-reachable channel without sanitising upstream. The icon registry is the wrong place to put attacker-controlled SVG — for that, use Angular's default sanitization on the host element.

If a registration fails the allowlist, the component refuses to register the icon and logs an error (dev mode: throws KitIconValidationError). This errs on the safe side: a missing glyph is better than rendering attacker-controlled markup.

API

| Input | Type | Default | Description | | ----------- | ------------------------------------------------------------- | ------- | ---------------------------------------- | | name | string | — | Registered icon name (required) | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| number | 'md' | Preset key or raw pixel value | | spin | boolean | false | Continuous rotation animation | | rotate | 0 \| 90 \| 180 \| 270 | 0 | Static rotation | | ariaLabel | string \| null | null | If set, marks the icon as role="img" |