Icon
@xui/iconSizing and colour for an @ng-icons icon — a directive on <ng-icon>, so the bare xui attribute is what applies the size scale and the semantic colours. An icon is decorative and hidden from assistive technology by default; give it a label when it carries meaning on its own.
Install
pnpm add @xui/icon Add the barrel to a standalone component's imports:
import { XuiIconImports } from '@xui/icon';
@Component({
imports: [XuiIconImports],
// …
})Examples
Default
Loading preview…
<ng-icon xui name="matFavoriteRound" size="md" color="inherit" />Sizes
Loading preview…
<div class="flex items-end gap-4">
<ng-icon xui size="xs" name="matFavoriteRound" />
<ng-icon xui size="sm" name="matFavoriteRound" />
<ng-icon xui size="md" name="matFavoriteRound" />
<ng-icon xui size="lg" name="matFavoriteRound" />
<ng-icon xui size="xl" name="matFavoriteRound" />
<ng-icon xui size="28px" name="matFavoriteRound" />
</div>Colors
Loading preview…
<div class="flex items-center gap-4">
<ng-icon xui name="matFavoriteRound" />
<ng-icon xui color="muted" name="matFavoriteRound" />
<ng-icon xui color="subtle" name="matFavoriteRound" />
<ng-icon xui color="primary" name="matFavoriteRound" />
<ng-icon xui color="secondary" name="matFavoriteRound" />
<ng-icon xui color="success" name="matCheckRound" />
<ng-icon xui color="error" name="matDeleteRound" />
<ng-icon xui color="warning" name="matWarningRound" />
<ng-icon xui color="info" name="matInfoRound" />
</div>Matrix
Loading preview…
<div class="flex flex-col gap-3">
@for (color of colors; track color) {
<div class="flex items-end gap-4">
<span class="text-foreground-muted w-20 text-xs">{{ color }}</span>
@for (size of sizes; track size) {
<ng-icon xui [size]="size" [color]="color" name="matFavoriteRound" />
}
</div>
}
</div>Accessible name
Loading preview…
<div class="flex items-center gap-4">
<ng-icon xui color="success" name="matCheckRound" label="Build passed" />
<ng-icon xui color="error" name="matDeleteRound" label="Delete" />
<ng-icon xui color="muted" name="matSearchRound" />
<span class="text-foreground-muted text-sm">— the first two are announced; the last is decorative</span>
</div>API
Sizing and colour for an @ng-icons icon.
Inputs
classClassValueThe user-defined classes. Note that a colour utility will not land here — @ng-icons outranks the utilities layer, so reach for color instead. Everything else (layout, spacing, transitions) applies as usual.''sizeXuiIconSizeIcon box size, from the shared scale. none leaves the size to the surrounding text or to your own classes; any other string is passed through as a length.this.config.sizecolorXuiIconColorSemantic colour. Defaults to inheriting the surrounding text colour, so an icon in a button matches its label.this.config.colorlabelstring | nullAn accessible name. Setting it marks the icon as meaningful content rather than decoration.null