Icon¶

Code¶

Usage¶

import { SiIconComponent } from '@simpl/element-ng/icon';

@Component({
  imports: [SiIconComponent, ...]
})

The si-icon component includes a fallback alternative text to make icons more accessible.

Composite icons¶

Some symbols require overlapping of two icons. The example below shows how to build event state icons.

Status icons¶

Severity symbols can be built with status icons.

SiIconComponent API Documentation¶

Component to render a font or SVG icon depending on the configuration. If no SVG icon is found, the component will fall back to render the icon-font. In that case, an application must ensure that the icon font is loaded. This component will only attach the respective class.

The content of this component is hidden in the a11y tree. If needed, the consumer must set proper labels.

Input Properties¶

Name	Type	Default	Description
icon ¶	string		Define which icon should be rendered. Provide using: - value of the icon map provided by addIcons - (not recommended): plain string in kebab-case or camelCase Example: import { elementUser } from '@simpl/element-icons/ionic'; @Component({template&#58; `<​si-icon [icon]="icons.elementUser" /​> <​si-icon icon="element-user" /​> <​si-icon icon="elementUser" /​> `}) class MyComponent { icons = addIcons(elementUser); }

SiStatusIconComponent API Documentation¶

Input Properties¶

Name	Type	Default	Description
status ¶	EntityStatusType

Types Documentation¶