Smartsoft — libraries for Angular and NestJS

Inline SVG glyph primitive. <smart-icon> dispatches over a fixed IconName set via @switch, rendering one of the standalone glyph components. Unlike the other component groups the icon has no *_STANDARD_COMPONENT_TOKEN and no IIconOptions — it is configured entirely through direct inputs.

Usage

<smart-icon [name]="name" [class]="iconClass" />

<ng-template #heart>
  <svg
    data-icon="heart"
    viewBox="0 0 24 24"
    fill="currentColor"
    class="smart:size-6 smart:text-pink-500"
  >
    <path
      d="M12 21s-7.5-4.6-9.5-9.2C1 8.3 3.4 5 6.8 5c2 0 3.4 1.1 4.2 2.4C11.8 6.1 13.2 5 15.2 5 18.6 5 21 8.3 19.5 11.8 17.5 16.4 12 21 12 21z"
    />
  </svg>
</ng-template>
<smart-icon [template]="heart" />

Public API

`smart-icon`

Input	Type	Default	Description
`name`	`IconName`	`undefined`	Which built-in glyph to render
`template`	`TemplateRef<unknown>\|null`	`null`	Custom SVG; overrides `name` when set
`class`	`string`	`''`	Extra CSS class forwarded to the glyph

class is the alias of the internal cssClass input (input('', { alias: 'class' })).

IconName

Each value maps to a standalone component (smart-icon-spinner, smart-icon-chevron-down, smart-icon-chevron-up) that renders a raw <svg> with smart:-prefixed Tailwind sizing.

Dispatch

The wrapper picks the branch with @switch (name()); when template() is set it renders [ngTemplateOutlet] instead and ignores name.

Preset

<smart-icon-preset> (IconPresetComponent) composes <smart-icon> inside a themed container. It is composition, not inheritance — it does not extend the base icon; it renders one and wraps it. Because there is no token, the preset is used through its selector directly (there is nothing to register).

Inputs

Input	Type	Default	Description
`name`	`IconName`	`'spinner'`	Glyph rendered by the inner icon
`template`	`TemplateRef<unknown>\|null`	`null`	Custom SVG override
`variant`	`IconPresetVariant`	`'plain'`	Container treatment
`size`	`IconPresetSize`	`'md'`	Glyph footprint + box padding
`class`	`string`	`''`	Extra class merged on the container

Variants (`IconPresetVariant`)

Variant	Surface
`plain`	No box — icon sits inline (inline-flex, centered)
`contained`	Bordered white square (`rounded-lg`, gray border, `shadow-2xs`) + dark twins
`soft`	Tinted round pill (`rounded-full`, `bg-blue-50`, blue text) + dark twins

Sizes (`IconPresetSize`)

Size	Glyph	Box padding
`sm`	`smart:size-4`	`smart:p-1.5`
`md`	`smart:size-5`	`smart:p-2`
`lg`	`smart:size-6`	`smart:p-2.5`

plain ignores the padding (no box). The container is exposed via data-role="icon-preset" for testing.

Documented Gaps / Limitations

No token and no IIconOptions by design — the icon and its preset are configured through direct inputs only, so <smart-icon> cannot be globally reskinned the way token-driven components can.
The IconName set is closed; new built-in glyphs require a new standalone glyph component plus a @switch branch. For one-off SVGs use [template].

Source

The component lives in packages/shared/angular/src/lib/components/icon and is documented for Claude Code by the angular-components-icon skill.