Overview API Styling Examples

Examples

These examples cover the main TngIcon inputs and the icon-pack APIs used to bring additional SVG sources into an app.

Accessibility Examples

Omit label for decorative icons. Add it when the icon is the only accessible name.

Dashboard

accessibility

html
<!-- Decorative icon: aria-hidden by default -->
<tng-icon icon="home" />

<!-- Labelled standalone icon: role="img" with aria-label -->
<tng-icon icon="search" label="Search" />

Size Input Examples

Use the input for local, component-owned sizing. Number bindings are normalized to pixel values.

1rem 1.25rem 24px

size input

html
<tng-icon icon="bell" size="1rem" />
<tng-icon icon="bell" size="1.25rem" />
<tng-icon icon="bell" [size]="24" />

CSS Variable Sizing

Use --tng-icon-size when size belongs to a CSS class, theme, or parent component.

Settings

CSS variable sizing

html
<tng-icon icon="settings" class="settings-icon" />

.settings-icon {
  --tng-icon-size: 1.5rem;
}

Pack Reference Examples

Use plain icon refs for the default pack and prefixed refs when a template must point at a specific pack.

default lucide:home

pack refs

html
<!-- Uses the configured default pack, lucide by default -->
<tng-icon icon="home" />

<!-- Uses an explicit pack prefix -->
<tng-icon icon="lucide:home" />

Custom Pack API

Create a pack from SVG loaders, provide it once, then reference icons with pack:name.

custom icon pack

typescript
import { createTngIconPack, provideTngIcons } from '@tailng-ui/icons';

const brandPack = createTngIconPack('brand', {
  logo: async () =>
    '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 22h20L12 2Z"/></svg>',
});

export const appConfig = {
  providers: [
    provideTngIcons({
      packs: [brandPack],
    }),
  ],
};

// Later in a template:
// <tng-icon icon="brand:logo" label="Brand" size="1.5rem" />