SiIconLegacyComponent documentation¶

selector

si-icon-legacy

Deprecated: This component should no longer be used. Use the SiIconComponent instead. Existing usages can be replaced as follows:

<!-- before -->
<si-icon icon="element-user" color="text-danger" />
<!-- after -->
<si-icon icon="element-user" class="icon text-danger" />

Important: Previously, the class icon was automatically applied. Unless not needed, it must now be applied manually. The icon class scales up the icon compared to its surrounding text.

Stacked icons need to be constructed in HTML directly. If applicable, the si-status-icon component should be used instead.

<!-- before -->
<si-icon
  icon="element-circle-filled"
  color="status-success"
  stackedIcon="element-state-tick"
  stackedColor="status-success-contrast"
  alt="Success"
/>

<!-- after -->
<div class="icon-stack icon" aria-label="Success">
  <si-icon icon="element-circle-filled" class="status-success" />
  <si-icon icon="element-state-tick" class="status-success-contrast" />
</div>

Input Properties¶

Name	Type	Default	Description
alt ¶	`TranslatableString`		Alternative name or translation key for icon. Used for A11y.
color ¶	`string`		Color class, see https://element.siemens.io/fundamentals/typography/#color-variants-classes
icon ¶	`string`		Icon token, see https://element.siemens.io/icons/element
size ¶	`string`	`'icon'`	Text-size class for icon size, see https://element.siemens.io/fundamentals/typography/#type-styles-classes
stackedColor ¶	`string`		Color class, see https://element.siemens.io/fundamentals/icons/
stackedIcon ¶	`string`		Icon token, see https://element.siemens.io/fundamentals/icons/

Types Documentation¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

IconConfig

¶

Interface

Global configuration for icons.

Properties
If true, the si-icon component will always render the icon font instead of the svg. disableSvgIcons?: `boolean` = `true`¶

SiIconComponent

¶

Class

▶

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.

Constructor
() => `{}`¶

Properties
config: `IconConfig` = ...¶
Icon class, which is ensured to be kebab-case. fontIcon: `Signal`<(`undefined` \| `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: ` <si-icon [icon]="icons.elementUser" /> <si-icon icon="element-user" /> <si-icon icon="elementUser" /> `}) class MyComponent { icons = addIcons(elementUser); } icon: `InputSignal`<`string`> = ...¶
iconService: `IconService` = ...¶
svgIcon: `Signal`<(`undefined` \| `SafeHtml`)> = ...¶

Methods

camelToKebabCase

(str: string) => string¶

Parameters
str: `string`¶

Except where otherwise noted, content on this site is licensed under MIT License.