Overview

tng-icon renders an icon from the @ng-icons registry (e.g. Bootstrap Icons). It supports name (required), size (number in px or string like 1em), slot for micro styling, and accessibility: decorative / ariaLabel.

Quick example

Basic
HTMLTSCSS

<tng-icon name="bootstrapAlarm" [size]="24" [slot]="{ icon: 'text-primary' }"></tng-icon>
<tng-icon name="bootstrapBell" size="1.5em" [slot]="{ icon: 'text-fg' }"></tng-icon>

Features

name / size

name: icon id from the registry. size: number (px) or string (e.g. 1em, 1.25rem).

slot

Slot-based micro styling: icon (host element).

decorative / ariaLabel

decorative=true (default) sets aria-hidden. When decorative=false, set ariaLabel for screen readers.