CngxIcon
cngx-icon
projects/common/display/icon/icon.component.ts
Import#
import { CngxIcon } from '@cngx/common/display'
Description#
Display atom for icons. Projects its content (font glyph, SVG, image, custom element) and adds size, color, and ARIA semantics.
Decorative by default (aria-hidden="true"); set label to make it
informative (role="img", aria-label).
Metadata#
Host#
Relationships
Index#
Inputs#
string | undefinedAccessible label. When set, the icon is treated as informative content.
"xs" | "sm" | "md" | "lg" | "xl"Size preset. Maps to CSS custom properties on the host.
'md'HostBindings#
| Binding | Expression |
|---|---|
[attr.role] | label() ? "img" : null |
[attr.aria-label] | label() ?? null |
[attr.aria-hidden] | label() ? null : "true" |
[class.cngx-icon--xs] | size() === "xs" |
[class.cngx-icon--sm] | size() === "sm" |
[class.cngx-icon--md] | size() === "md" |
[class.cngx-icon--lg] | size() === "lg" |
[class.cngx-icon--xl] | size() === "xl" |
Default visuals for CngxIcon. The host carries .cngx-icon and
sizes itself in em so an icon next to running text matches the
surrounding font scale automatically. Color follows currentColor,
so the glyph inherits the container's text color without any
per-instance override.
Size variants
Each size pins --cngx-icon-size. Consumers can swap a variant
value globally (override --cngx-icon-size-xs) or pin a specific
instance via inline --cngx-icon-size:
--xs- 0.75em--sm- 1em--md- 1.25em (default)--lg- 1.5em--xl- 2em
Slots
:scope > svg- projected SVG fills the host box,fill: currentColorso brand color flows through
Inheritance
Leaf tokens - the active size and color are component-local.
--cngx-icon-color defaults to currentColor so no fallback
chain is needed for the color cascade.
Index#
Layout
*1.25emActive size of the icon - consumed by the :scope rule. Driven
by the size-variant classes or set inline for one-off overrides.
Surface
*currentColorText color of the icon glyph. Defaults to currentColor so the
icon inherits its container's text color.