Icon
With the help of the Icon component, icons from integrated icon fonts can be displayed at any position. The output of the icon can be controlled using the _icon attribute and is made barrier-free using the _label attribute. By default the output is as an inline element.
Currently the icons are supported by
index.html) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.Construction
The Icon component is created via the HTML tag kol-icon.
Code
<kol-icon _label="Zu Hause" _icons="kolicon-house"></kol-icon>
Example
Icons
The property _icons expects a string with the class names of the icons to be shown (e.g.: _icons="kolicon-house).
Accessibility
It is important for context-relevant graphics to be labeled.
Labels
A context-relevant icon must be labeled using the _label property.
Links and references
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_icons (required) | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | string | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
Shadow Parts
| Part | Description |
|---|---|
"icon" | Ermöglicht das Styling des inneren Icons. |