Icons

SVG icon component powered by Tabler Icons — 6,000+ icons in outline and filled variants. All icons are bundled and exported from @letsprogram/ng-oat/icons. Tree-shakable, SSR-safe, and integrated with Oat design tokens.

Input	Type	Default	Description
`[icon]`	`NgOatIconData \| string`	—	Icon object or registered string name (required)
`[size]`	`number`	`24`	Width & height in px
`[stroke]`	`number`	`2`	Stroke width (outline icons only)
`[color]`	`string`	`currentColor`	Stroke / fill color
`[ariaLabel]`	`string`	—	Accessible label (sets `role="img"`)
`[svgClass]`	`string`	—	Extra CSS class(es) on the SVG element

Import & Setup

typescript

import { Component } from '@angular/core';
import { NgOatIcon, iconHome, iconUser, iconStarFilled } from '@letsprogram/ng-oat/icons';

@Component({
  selector: 'app-example',
  imports: [NgOatIcon],
  template: `
    <ng-oat-icon [icon]="homeIcon" />
    <ng-oat-icon [icon]="userIcon" [size]="20" />
    <ng-oat-icon [icon]="starIcon" color="var(--oat-warning)" />
  `,
})
export class ExampleComponent {
  homeIcon = iconHome;
  userIcon = iconUser;
  starIcon = iconStarFilled;
}

Icon Gallery

A sample of the 6,000+ available icons. Browse all at tabler.io/icons.

home

user

settings

star

bell

heart

mail

calendar

cloud

download

upload

edit

trash

copy

filter

eye

lock

phone

map-pin

globe

code

sun

moon

alert

check

plus

bookmark

heart ●

star ●

sun ●

moon ●

bell ●

user ●

home ●

html

import {
  iconHome, iconUser, iconSearch, iconSettings,
  iconStar, iconBell, iconMail, iconCalendar,
  iconHeartFilled, iconStarFilled, // ... and 6,000+ more
} from '@letsprogram/ng-oat/icons';

<!-- Grid of icons -->
<ng-oat-icon [icon]="iconHome" />
<ng-oat-icon [icon]="iconUser" />
<ng-oat-icon [icon]="iconSearch" />
<!-- ... -->

Basic Usage

html

import { iconHome, iconUser, iconSearch, iconSettings, iconStar, iconBell } from '@letsprogram/ng-oat/icons';

<ng-oat-icon [icon]="iconHome" />
<ng-oat-icon [icon]="iconUser" />
<ng-oat-icon [icon]="iconSearch" />
<ng-oat-icon [icon]="iconSettings" />
<ng-oat-icon [icon]="iconStar" />
<ng-oat-icon [icon]="iconBell" />

Outline vs Filled

Most popular icons come in both outline and filled variants. Filled icons use fill instead of stroke.

html

import {
  iconHome, iconHomeFilled,
  iconStar, iconStarFilled,
  iconHeart, iconHeartFilled,
  iconBell, iconBellFilled,
  iconBookmark, iconBookmarkFilled,
  iconUser, iconUserFilled,
} from '@letsprogram/ng-oat/icons';

<!-- Outline (top row) -->
<ng-oat-icon [icon]="iconHome" />
<ng-oat-icon [icon]="iconStar" />
<ng-oat-icon [icon]="iconHeart" />

<!-- Filled (bottom row) -->
<ng-oat-icon [icon]="iconHomeFilled" />
<ng-oat-icon [icon]="iconStarFilled" />
<ng-oat-icon [icon]="iconHeartFilled" />

Sizes

html

<ng-oat-icon [icon]="iconHome" [size]="16" />  <!-- Small -->
<ng-oat-icon [icon]="iconHome" [size]="20" />  <!-- Compact -->
<ng-oat-icon [icon]="iconHome" [size]="24" />  <!-- Default -->
<ng-oat-icon [icon]="iconHome" [size]="32" />  <!-- Large -->
<ng-oat-icon [icon]="iconHome" [size]="48" />  <!-- XL -->

Stroke Widths

Adjust the stroke width for outline icons. Has no effect on filled icons.

html

<ng-oat-icon [icon]="iconStar" [stroke]="1" />    <!-- Thin -->
<ng-oat-icon [icon]="iconStar" [stroke]="1.5" />  <!-- Light -->
<ng-oat-icon [icon]="iconStar" [stroke]="2" />    <!-- Default -->
<ng-oat-icon [icon]="iconStar" [stroke]="2.5" />  <!-- Medium -->
<ng-oat-icon [icon]="iconStar" [stroke]="3" />    <!-- Bold -->

Colors & Design Tokens

Pass any CSS color value or Oat design token variable to the [color] input.

html

<!-- Oat design tokens -->
<ng-oat-icon [icon]="iconHeartFilled" color="var(--oat-danger)" />
<ng-oat-icon [icon]="iconStarFilled" color="var(--oat-warning)" />
<ng-oat-icon [icon]="iconCheck" color="var(--oat-success)" />
<ng-oat-icon [icon]="iconUser" color="var(--oat-primary)" />

<!-- Any CSS color -->
<ng-oat-icon [icon]="iconLock" color="#8b5cf6" />

Inside Buttons

html

<!-- Text buttons with icons -->
<ng-oat-button>
  <ng-oat-icon [icon]="iconHome" [size]="16" /> Home
</ng-oat-button>
<ng-oat-button variant="secondary" btnStyle="outline">
  <ng-oat-icon [icon]="iconSettings" [size]="16" /> Settings
</ng-oat-button>
<ng-oat-button variant="danger">
  <ng-oat-icon [icon]="iconTrash" [size]="16" /> Delete
</ng-oat-button>

<!-- Icon-only buttons -->
<ng-oat-button [icon]="true">
  <ng-oat-icon [icon]="iconPlus" [size]="16" />
</ng-oat-button>

String-based Registration

For convenience, you can use string names instead of object binding. Register icons once with provideNgOatIcons() in your app config, then reference them by name. Supports kebab-case ("home"), filled variants ("heart-filled"), and export names ("iconHome").

typescript

// app.config.ts — register icons for string-based usage
import { provideNgOatIcons, iconHome, iconUser, iconHeartFilled } from '@letsprogram/ng-oat/icons';

export const appConfig = {
  providers: [
    provideNgOatIcons({ iconHome, iconUser, iconHeartFilled }),
  ],
};

// Then use string names in templates:
// <ng-oat-icon icon="home" />
// <ng-oat-icon icon="user" />
// <ng-oat-icon icon="heart-filled" />

Global Configuration

Set global defaults for all icons with provideNgOatIconConfig(). Per-instance inputs always override the global config.

typescript

// app.config.ts — set global icon defaults
import { provideNgOatIconConfig } from '@letsprogram/ng-oat/icons';

export const appConfig = {
  providers: [
    provideNgOatIconConfig({
      size: 20,           // Default icon size (default: 24)
      stroke: 1.5,        // Default stroke width (default: 2)
      color: 'currentColor', // Default color
    }),
  ],
};

// Per-instance inputs always override:
// <ng-oat-icon [icon]="iconHome" [size]="48" />  ← uses 48, not 20

Accessibility

When [ariaLabel] is set, the SVG gets role="img" and an accessible name. Without it, the SVG gets aria-hidden="true" (decorative).

html

<!-- Meaningful icon: set ariaLabel for screen readers -->
<ng-oat-icon [icon]="iconHome" ariaLabel="Go to home page" />
<ng-oat-icon [icon]="iconSearch" ariaLabel="Open search" />

<!-- Decorative icon: no ariaLabel → gets aria-hidden="true" -->
<ng-oat-icon [icon]="iconStar" />