Skip to main content

Icon

Mit Hilfe der Icon-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut _icon gesteuert werden und erfolgt durch das Attribut _label barrierefrei. Die Ausgabe erfolgt standardmäßig als inline-Element.

Aktuell werden die Icons von unterstützt.

Es ist wichtig, dass in der Rahmenseite (index.html) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.

Konstruktion

Die Komponente Icon wird über das HTML-Tag kol-icon erzeugt.

Code

<kol-icon _label="Zu Hause" _icons="codicon codicon-home"></kol-icon>

Beispiel

Icons

Die Property _icons erwartet einen String mit den Klassennamen der zu zeigenden Icons (z.B.: _icons="codicon codicon-home).

Barrierefreiheit

Wichtig ist bei Kontext-relevanten Grafiken, dass sie beschriftet werden.

Label

Mittels der Property _label muss ein Kontext-relevantes Icon beschriftet werden.

Properties

PropertyAttributeDescriptionTypeDefault
_icons (required)_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").stringundefined
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).stringundefined

Shadow Parts

PartDescription
"icon"Ermöglicht das Styling des inneren Icons.

Live-Editor

Beispiele