Overview API Styling Examples

Icons

@tailng-ui/icons provides a lazy-loading icon system with built-in Lucide support and an extensible pack API for any SVG icon set.

Getting Started

Installation

Install the icons package along with the @ng-icons peer dependencies for Lucide (the default built-in pack).

pnpm

bash
pnpm add @tailng-ui/icons @ng-icons/core @ng-icons/lucide
Configuration

Default Setup - Lucide Icons

Call provideTngIcons() in your application config. With no arguments, Lucide is registered as the default pack.

app.config.ts

typescript
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideTngIcons } from '@tailng-ui/icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTngIcons(), // uses Lucide by default
  ],
};

Basic Usage

Import TngIcon and use the <tng-icon> element. Icons load lazily on first use.

my.component.html

html
<!-- decorative icon alongside text (aria-hidden by default) -->
<tng-icon icon="home" size="1.25rem" />

<!-- meaningful standalone icon with accessible label -->
<tng-icon icon="search" label="Search" size="1.25rem" />

<!-- kebab-case and camelCase icon names are both supported -->
<tng-icon icon="arrow-right" size="1rem" />
<tng-icon icon="arrowRight" size="1rem" />

Icon Reference Syntax

Icon names can be plain, resolved against the default pack, or prefixed with pack-name: to reference a specific pack.

pack:name syntax

html
<!-- no prefix -> uses the default pack (lucide) -->
<tng-icon icon="star" />

<!-- explicit pack:name syntax -->
<tng-icon icon="lucide:star" />
<tng-icon icon="bootstrap:star-fill" />
<tng-icon icon="flags:us" />