Overview API Styling Examples

Styling

Size icons through the public input or CSS custom property, and let icon color inherit from the surrounding UI.

Size Input

Use size for one-off sizing. Numeric values are normalized to pixels.

size input

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

CSS Variable Sizing

Use --tng-icon-size when a class, theme, or parent component owns the icon size.

CSS variable

html
<tng-icon icon="home" class="nav-icon" />

.nav-icon {
  --tng-icon-size: 1.25rem;
}

Color Inheritance

Icons render with currentColor, so color should usually come from the parent control or text context.

Secondary Brand

currentColor

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

.icon-button {
  color: var(--tng-fg-secondary);
}

.icon-button:hover {
  color: var(--tng-accent-brand);
}

Accessibility Styling

Decorative icons are hidden from assistive technology by default. Add label only when the icon itself conveys meaning.

accessibility

html
<!-- Decorative icon: hidden from assistive tech -->
<tng-icon icon="chevron-right" />

<!-- Meaningful standalone icon: expose a label -->
<tng-icon icon="search" label="Search" />