RhombusKit

Icon

<rhombus-icon> renders an icon as an inline currentColor SVG — so it inherits text colour and needs no icon font. Icons come from a registry you populate once with provideRhombusIcons() (a name → SVG map, the same shape as a Material addSvgIconLiteral map). The library's built-in glyphs are pre-registered, and any unregistered name falls back to <mat-icon> (Material font).

Example

When to use

  • To show a standalone icon in your own markup — next to text, inside a custom control, or as a status glyph.
  • When you want icons that theme with the text colour automatically and ship as bundled SVG (no icon-font request).
  • To replace ad-hoc <mat-icon svgIcon> usage with a registry that lives in @rhombuskit/core.

When not to use

  • For an icon that is part of another RhombusKit component, use that component's icon input — e.g. Button's leadingIcon or Empty State's icon.
  • For a purely decorative flourish that the design owns in CSS, a background image or CSS shape may be simpler than a DOM icon.

Related components

  • Button — renders icons via leadingIcon / trailingIcon.
  • Empty State — shows a large illustrative icon.
  • Theme Controls — built on the same pre-registered glyphs.

Was this page helpful?