Icon

Eine Liste aller verfügbaren Icons inklusive IDs gibt es in der Icon-Übersicht und auf dieser Seite unten innerhalb des Dev und API Reiters.
Icons dürfen nicht eingefärbt werden. Ausnahmen sind Social Media Icons und spezielle Icons für Informationsgrafiken, Applikationen wie den Stadtplan et cetera. Beispiele finden Sie im Bereich Farben.
Damit Icons einheitlich und verständlich verwendet werden, gibt es bei den Patterns Button, Card, Tag, Chip und bei Formularen Vorgaben, wie welche Icons eingesetzt werden dürfen.
Alleinstehende Icons, auch im Kontext, brauchen einen Alt-Text. Wenn ein Icon mit Beschreibung verwendet wird, dann muss kein Alt-Text (Doppelung!) angeführt werden.

Liste vorgegebener Icons

Varianten

Vorschau

Standort

Code

<wm-icon iconid="pin">Standort</wm-icon>

Vorschau

Standort

Code

<wm-stack horizontal gap="xs">
  <wm-icon iconid="pin">Standort</wm-icon>
  <a href="#">1., Rathausstraße 42</a>
<wm-stack>

Vorschau

Code

<wm-stack horizontal gap="xs">
  <wm-icon iconid="telefon"></wm-icon>
  <span>Telefon: <a href="tel:">+43 1 4000 xxxx</a></span>
<wm-stack>

Vorschau

Code

<wm-icon iconid="check" width="88"></wm-icon>

Dev

Interaktive Demo

iconid

width

Vorschau

Code

<wm-icon iconid="amtswege" data-demo-pattern="wm-icon-preview"></wm-icon>

API

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Icon/Icon.js" type="module"></script>

JavaScript

import { Icon } from './wienermelange/assets/js/components/Icon/Icon.js';

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`width`	Standardbreite in Pixel	`Number`	`26`
`height`	Entspricht Breite wenn nicht definiert	`Number`	leer
`class`	Additional classes	`String`	leer
`iconid`	ID	'amtswege'\|'burger'\|'check'\|'chevron-down'\|'chevron-left'\|'chevron-double-left'\|'chevron-right'\|'chevron-double-right'\|'chevron-up'\|'clock'\|'close'\|'contact'\|'contact_alternative'\|'contact_loggedin'\|'contact_notification'\|'download'\|'email'\|'embed'\|'error'\|'euro'\|'external'\|'facebook'\|'fullscreen'\|'gams'\|'gamesno'\|'grid'\|'handson'\|'home'\|'hide'\|'info'\|'instagram'\|'language'\|'link'\|'linkedin'\|'message'\|'money'\|'park'\|'pause'\|'pin'\|'play'\|'play-button'\|'search'\|'settings'\|'share'\|'sidebar'\|'show'\|'sound'\|'success'\|'twitter'\|'trash'\|'water'\|'waterno'\|'warning'\|'whatsapp'\|'wien-bot'\|'wifi'\|'youtube'\|'x'\|'xing'\|'zoom'	`""`

Name	Beschreibung
`default`	Beschreibung des Icons. Nur befüllen, wenn der Inhalt auch wirklich im Accessbility Tree sein soll.

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at