# Icon
The icon component resolves symbols from the generated sprite and falls back across size and variant combinations when needed. For most product UI, icons stay decorative and inherit color from surrounding content. The key practical need in this showcase is the browser with search, because the icon catalog is large enough that static previews alone are not useful.
## Import
```ts
import { IconComponent, type IconName, ALL_ICON_NAMES } from 'ui';
```
## Overview
```ts
import { Component } from '@angular/core';
import { IconComponent, IconName } from 'ui';
type IconVariant = 'regular' | 'filled';
type IconSize = 'small' | 'medium' | 'large';
const overviewIcons: IconName[] = ['home', 'search', 'settings', 'info', 'checkmark', 'delete'];
const sizes: IconSize[] = ['small', 'medium', 'large'];
const variants: { label: string; value: IconVariant }[] = [
{ label: 'Regular', value: 'regular' },
{ label: 'Filled', value: 'filled' },
];
@Component({
selector: 'app-icon-overview-demo',
standalone: true,
imports: [IconComponent],
template: `
@for (variant of variants; track variant.value) {
{{ variant.label }}
@for (iconName of icons; track iconName) {
{{ iconName }}
@for (size of sizes; track size) {
{{ size }}
}
}
}
@for (item of sizes; track item.size) {
{{ item.label }}
preset {{ item.size }}
}
Custom
sizePx="32"
Regular
Best for lower visual weight
Filled
Better for emphasis and active states
Rotation
Optional rotate for special cases
`,
})
export class IconVariantDemoComponent {}
```
## Decorative and semantic usage
```ts
import { Component } from '@angular/core';
import { BadgeComponent, ButtonComponent, IconComponent } from 'ui';
@Component({
selector: 'app-icon-semantic-demo',
standalone: true,
imports: [IconComponent, ButtonComponent, BadgeComponent],
template: `
Decorative and semantic usage
Most icons are decorative. Add ariaLabel only when the icon itself needs to be announced
as meaningful content.
Semantic icon with ariaLabel
Decorative icon without extra announcement
`,
})
export class IconSemanticDemoComponent {}
```
## Icon browser with search
```ts
import { Component, ElementRef, computed, effect, signal, viewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
ALL_ICON_NAMES,
DropdownComponent,
DropdownItem,
IconComponent,
IconName,
SearchComponent,
Size,
} from 'ui';
const ICON_BROWSER_BATCH_SIZE = 120;
const variants = ['regular', 'filled'] as const;
const sizes: Size[] = ['small', 'medium', 'large'];
const sizeItems: DropdownItem[] = sizes.map(size => ({
value: size,
label: size[0].toUpperCase() + size.slice(1),
}));
const variantItems: DropdownItem[] = variants.map(variant => ({
value: variant,
label: variant[0].toUpperCase() + variant.slice(1),
}));
@Component({
selector: 'app-icon-browser-demo',
standalone: true,
imports: [FormsModule, DropdownComponent, IconComponent, SearchComponent],
host: {
style: 'display:block;width:100%;',
},
template: `
Showing {{ visibleIcons().length }} of {{ filteredIcons().length }}
matching icons
@if (filteredIcons().length < iconNames.length) {
from {{ iconNames.length }} available icons
}
@if (copiedIcon()) {
Copied icon name: {{ copiedIcon() }}
}
@if (filteredIcons().length > 0) {
@for (iconName of visibleIcons(); track iconName) {
{{ iconName }}
}
} @else {
No icons found matching "{{ searchQueryValue }}".
}
`,
})
export class IconBrowserDemoComponent {
protected readonly iconNames = ALL_ICON_NAMES as IconName[];
protected readonly sizes = sizes;
protected readonly variants = variants;
protected readonly sizeItems = sizeItems;
protected readonly variantItems = variantItems;
private readonly searchQuery = signal('');
private readonly visibleIconsCount = signal(ICON_BROWSER_BATCH_SIZE);
protected readonly browserSize = signal('medium');
protected readonly browserVariant = signal<(typeof variants)[number]>('regular');
protected readonly copiedIcon = signal(null);
private readonly scrollContainer = viewChild>('scrollContainer');
get searchQueryValue(): string {
return this.searchQuery();
}
set searchQueryValue(value: string) {
this.searchQuery.set(value);
}
protected readonly filteredIcons = computed(() => {
const query = this.searchQuery().toLowerCase().trim();
if (!query) {
return this.iconNames;
}
return this.iconNames.filter(iconName => iconName.toLowerCase().includes(query)) as IconName[];
});
protected readonly visibleIcons = computed(() =>
this.filteredIcons().slice(0, this.visibleIconsCount()),
);
private readonly hasMoreVisibleIcons = computed(
() => this.visibleIcons().length < this.filteredIcons().length,
);
constructor() {
effect(() => {
this.searchQuery();
this.visibleIconsCount.set(ICON_BROWSER_BATCH_SIZE);
queueMicrotask(() => {
const container = this.scrollContainer()?.nativeElement;
if (container) {
container.scrollTop = 0;
}
});
});
}
protected onGridScroll(event: Event): void {
const container = event.target as HTMLDivElement | null;
if (!container || !this.hasMoreVisibleIcons()) {
return;
}
const distanceToBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
if (distanceToBottom <= 320) {
this.visibleIconsCount.update(count => count + ICON_BROWSER_BATCH_SIZE);
}
}
protected async copyIconName(iconName: IconName): Promise {
try {
await navigator.clipboard.writeText(iconName);
} catch {
const textArea = document.createElement('textarea');
textArea.value = iconName;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}
this.copiedIcon.set(iconName);
}
protected asSize(value: string | number | null | undefined): Size {
return value === 'small' || value === 'large' ? value : 'medium';
}
protected asVariant(value: string | number | null | undefined): (typeof variants)[number] {
return value === 'filled' ? 'filled' : 'regular';
}
}
```
## Accessibility
### Decorative versus semantic icons
By default the icon stays decorative and is hidden from assistive technology. Add `ariaLabel` only when the icon itself carries meaning that is not already present in surrounding text.
| Mode | Accessibility behavior |
| --- | --- |
| decorative icon | `aria-hidden="true"` |
| semantic icon | `role="img"` with `aria-label` |
| icon inside a labeled control | usually remains decorative because the parent control already exposes the label |
### Direction and locale fallback
The component can resolve locale-specific or direction-aware symbols and also allows explicit `direction` or `locale` overrides. In most app usage this stays automatic rather than manually configured.
### Usage guidance
Do not rely on icons alone to communicate critical meaning. Pair important status or action meaning with text, tooltip content, or an already labeled parent control.