Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Aperçu Base Composants Aperçu Base Composants Aperçu Design Tokens Composants Releases Aperçu Base Informations Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications
Trouver un composant

Lyne

Basics Animation Animation Border Border Grid Grid Spacings Spacings Typografie Typografie Components Action-Group Action-Group Alert Alert Alert-Group Alert-Group Autocomplete Autocomplete Button Button Calendar Calendar Card Card Card-Badge Card-Badge Checkbox Checkbox Checkbox-Group Checkbox-Group Chip Chip Clock Clock Datepicker Datepicker Dialog Dialog Divider Divider Footer Footer Form-Error Form-Error Form-Field Form-Field Header Header Header-Action Header-Action Icon Icon Image Image Journey-Header Journey-Header Link Link Link-List Link-List Logo Logo Menu Menu Menu-Action Menu-Action Tooltip Tooltip Tooltip-Trigger Tooltip-Trigger Radio-Button Radio-Button Radio-Button-Group Radio-Button-Group Selection-Panel Selection-Panel Signet Signet Slider Slider Tab-Group Tab-Group Tab Title Tab Title Tag Tag Tag-Group Tag-Group Teaser Teaser Teaser-Hero Teaser-Hero Time-Input Time-Input Title Title Toggle Toggle Toggle-Check Toggle-Check
Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles Deutsch English Icon Implementation

The sbb-icon component provides a solid way of rendering registered and named icons.

The component will dynamically load an SVG for each icon, avoiding multiple requests to the same icon.
The icon components are not tied to specific icon sets; you can register custom namespaces
and then provide the sbb-icon with the name property in the format name="icon-name" or name="namespace:icon-name".

Note that if you do not provide a namespace, the default namespace will be used pointing to the SBB Icons CDN (Work in progress).

<!-- Will use the default namespace -->
<sbb-icon name="app-icon-medium"></sbb-icon>

Accessibility

Similar to an <img> element, an icon alone does not convey any useful information for a screen-reader user.
The user of sbb-icon must provide additional information pertaining to how the icon is used.
Based on the use-cases described below, sbb-icon is marked as aria-hidden="true" by default,
but this can be overridden by adding aria-hidden="false" to the element.

In thinking about accessibility, it is useful to place icon use into one of three categories:

  1. Decorative: the icon conveys no real semantic meaning and is purely cosmetic.
  2. Interactive: a user will click or otherwise interact with the icon to perform some action.
  3. Indicator: the icon is not interactive, but it conveys some information, such as a status.
    This includes using the icon in place of a text inside a larger message.

Properties

Name Attribute Privacy Type Default Description
name name public string The provided name consisting of the namespace and the name of the icon. If the namespace is missing, the default namespace "sbb" will be used. E.g. name (will use "sbb" as namespace) or namespace:name.
noSanitize no-sanitize public boolean false When set to true, SVG content that is HTTP fetched will not be checked if the response SVG content has any <script> elements, or any attributes that start with on, such as onclick.
Demo
Icon KOM Icon, small KOM Icon, medium KOM Icon, large Fahrplan Attribut HIM-CUS Icon Produkt Icon Farbe Black Rot Metal Sky White Hintergrund White Milk Iron Charcoal Black
Beispiele Basic Tag
Checked Tag
Disabled Tag
Checked And Disabled Tag
With Amount
With Icon
With Amount And Icon
With Amount And Icon Slotted
With Amount And Icon Checked
With Amount And Icon Disabled
With Amount And Icon Checked And Disabled
HTML-Markup kopiert.
Impressum Contact Paramètres des cookies