Skip to content

Icons

Die App verwendet tintbare Material-Icons mit einer kleinen, bewusst kontrollierten Registry.

Warum eine feste Registry

Vorteile:

  • definierte JSON-Namen
  • konsistente Darstellung
  • sichere Tintbarkeit
  • keine Abhängigkeit von beliebigen Stringnamen aus externen Libraries

Auflösungsregeln

Vor der Suche wird der Icon-Name normalisiert:

  • trimmen
  • in Kleinbuchstaben umwandeln
  • - durch _ ersetzen
  • Leerzeichen durch _ ersetzen

Dadurch sind diese Namen gleichwertig:

  • lightbulb
  • light-bulb
  • light bulb

Vollständige Icon-Liste

JSON-Name Alias(e) Material-Icon
air - Icons.Outlined.Air
bike bicycle Icons.Outlined.DirectionsBike
bolt - Icons.Outlined.Bolt
bus - Icons.Outlined.DirectionsBus
camera camera_alt Icons.Outlined.CameraAlt
door door_front Icons.Outlined.DoorFront
home - Icons.Outlined.Home
light lightbulb Icons.Outlined.Lightbulb
lock - Icons.Outlined.Lock
lock_open - Icons.Outlined.LockOpen
pc computer Icons.Outlined.Computer
power power_settings_new Icons.Outlined.PowerSettingsNew
remote - Icons.Outlined.SettingsRemote
router - Icons.Outlined.Router
sensor sensors Icons.Outlined.Sensors
speaker - Icons.Outlined.Speaker
temperature thermostat Icons.Outlined.DeviceThermostat
train - Icons.Outlined.Train
tram - Icons.Outlined.Tram
tv - Icons.Outlined.Tv
video videocam Icons.Outlined.Videocam
water water_drop Icons.Outlined.WaterDrop
wifi - Icons.Outlined.Wifi
window - Icons.Outlined.Window

Statisches Icon

"icon": {
  "name": "window",
  "defaultColor": "#475569"
}

Dynamisches Icon

"icon": {
  "name": "home",
  "namePath": "device.icon",
  "defaultColor": "#0E7490"
}

Wenn device.icon einen nicht vorhandenen Namen liefert:

  • die App fällt auf icon.name zurück
  • wenn auch der fehlt oder nicht auflösbar ist, wird ein vorhandenes emoji genutzt

Emoji-Fallback

"icon": {
  "emoji": "💡",
  "defaultColor": "#F59E0B"
}

Wichtig:

  • Emojis sind visuell vom Systemfont abhängig
  • viele Emojis sind mehrfarbig
  • deshalb lassen sie sich nicht so zuverlässig einfärben wie Material-Icons

Kein Icon anzeigen

Wenn gar kein Icon gewünscht ist:

  • content.icon einfach ganz weglassen

Dann rendert die App auch keinen impliziten Fallback.

Empfehlung

Für produktive Dashboards:

  • icon.name statt Emoji bevorzugen
  • Emojis nur als bewusste Ausnahme einsetzen
  • dynamische Icons über namePath nur mit Werten aus der bekannten Registry befüllen

Verwandte Themen