upp-icon

Named icons: catalogue keys load SVG from upp-wdgt assets (inlined, currentColor); any other name is passed through to ion-icon, so callers use one component and one name input.

When to Use

• You need a project-specific glyph (e.g. floor furniture item-*) next to Ionic labels.
• The icon must follow text colour / theme variables, not a fixed raster or <img> bitmap colour.

Requirements

• Assets: apps must copy libs/upp-wdgt/assets to /assets/upp-wdgt (see unpispas-pos / upp-test project.json).
• HTTP: import UppWdgtModule (includes HttpClientModule) or provide HttpClient where the component is used.

API

Input	Type	Description
name	string	UPP_ICON_NAMES value → SVG asset; otherwise forwarded to ion-icon (e.g. settings-outline).
size	string (optional)	Box size, e.g. 40px, 1.25rem. Default visual size follows 1em.
color	string | null (optional)	Ionic palette name (primary, danger, …). SVG branch: host color: var(--ion-color-<name>); ion-icon branch: same value on [color]. When omitted, inherits like plain text.

Exports: UppIconName, UPP_ICON_NAMES, isUppIconName, UPP_ICON_ASSET_BASE from @unpispas/upp-wdgt.

Example

<ion-item>
  <upp-icon slot="start" name="item-door" size="40px" color="primary"></upp-icon>
  <ion-label>Añadir puerta</ion-label>
</ion-item>

Adding Icons

1. Add <name>.svg under libs/upp-wdgt/assets/icon/ using fill="currentColor" and/or stroke="currentColor".
2. Append name to UPP_ICON_NAMES in libs/upp-wdgt/src/components/upp-icon/upp-icon.ts.
3. Extend unit tests in libs/upp-wdgt/src/specs/upp-icon.spec.ts if behaviour changes.