Icon

Overview

Import the component and drop it into a template.

import { IconComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [IconComponent],
})

Basic usage — render one of the built-in icons by name:

<gog-icon name="check" />

Examples

@for (iconName of iconNames; track iconName) {
  <gog-icon [name]="iconName" />
}

<gog-icon name="success" style="--gog-icon-size: 16px" />
<gog-icon name="success" style="--gog-icon-size: 24px" />
<gog-icon name="success" style="--gog-icon-size: 40px" />

<gog-icon name="warning" [ariaHidden]="false" title="Warning" />

<gog-icon [template]="customDot" />

<ng-template #customDot>
  <span style="width: 1em; height: 1em; border-radius: 50%; background: currentColor; display: block;"></span>
</ng-template>

Your own icons 21.4.0

name is not a closed list. It is typed GogIconName = GogBuiltinIconName | (string & {}): the built-ins autocomplete, and any name you have registered is accepted. Register once, at the root or in any injector below it:

// app.config.ts — register once, use the name anywhere an icon name is taken
import { provideGogIcons } from '@guildofgleks/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideGogIcons({
      cart: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">…</svg>',
      rocket: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">…</svg>',
    }),
  ],
};

From then on the name works anywhere an icon name is taken — not just in gog-icon:

<gog-icon name="cart" />
<gog-tag iconName="cart">In basket</gog-tag>
<gog-button iconStart="rocket">Launch</gog-button>

A registered name beats a built-in

This is the point of the registry rather than a side effect: it is how you swap the library's glyphs for your own across every component at once, without touching a single call site.

// A registered name wins over the built-in of the same name — every checkmark the
// library renders (checkbox, multiselect, toast) becomes yours, with no call site touched.
provideGogIcons({
  check: '<svg viewBox="0 0 24 24">…your checkmark…</svg>',
});

Rules worth knowing

• It layers down the injector tree. A nested provideGogIcons(...) adds to the parent's set instead of replacing it — the same as provideGogConfig — so a lazy route can register only the three icons it uses and still see the app-wide ones.
• An unknown name renders nothing and warns in dev mode. It never throws: an icon is decoration, and failing a render over a typo is the worse outcome.
• Write the SVG for inheritance. Give it a viewBox and stroke="currentColor" (or fill), and no width or height — gog-icon drives size and stroke width from the --gog-icon-* tokens, so a registered icon scales and colours exactly like a built-in.
• Security — the one part that can actually bite. Registered markup is inserted with bypassSecurityTrustHtml, because Angular's HTML sanitizer strips SVG and would leave you with nothing. That is safe for static markup you authored or imported at build time, and unsafe for anything derived from user input or fetched at runtime. If you need remote icons, fetch them yourself, run them through a real SVG sanitizer, and register the result.

API Reference

Inputs

Providers & types

Two type names, and the difference matters when you are enumerating icons: GogBuiltinIconName21.4.0 is the closed union of the 41 glyphs that ship with the library — use it for a gallery or an icon picker, where an exhaustive list is the point. GogIconName is the open one every input takes, so a registered name type-checks.

provideGogIcons is not part of GOG_CONFIG — it is its own provider, so there is no icons key to look for on the Global Configuration page.

Styling Tokens

Every CSS custom property the icon paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.