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`
`bathroom`	-	`Icons.Outlined.Bathroom`
`bike`	`bicycle`	`Icons.AutoMirrored.Outlined.DirectionsBike`
`blinds`	-	`Icons.Outlined.Blinds`
`blinds_closed`	-	`Icons.Outlined.BlindsClosed`
`bolt`	-	`Icons.Outlined.Bolt`
`bus`	-	`Icons.Outlined.DirectionsBus`
`car`	`directions_car`	`Icons.Outlined.DirectionsCar`
`camera`	`camera_alt`	`Icons.Outlined.CameraAlt`
`cleaning_services`	`vacuum`	`Icons.Outlined.CleaningServices`
`coffee_maker`	-	`Icons.Outlined.CoffeeMaker`
`curtains`	-	`Icons.Outlined.Curtains`
`curtains_closed`	-	`Icons.Outlined.CurtainsClosed`
`door`	`door_front`	`Icons.Outlined.DoorFront`
`electric_meter`	-	`Icons.Outlined.ElectricMeter`
`food`	`restaurant`	`Icons.Outlined.Restaurant`
`garage`	-	`Icons.Outlined.Garage`
`heat_pump`	-	`Icons.Outlined.HeatPump`
`home`	-	`Icons.Outlined.Home`
`kids_room`	`bedroom_child`	`Icons.Outlined.BedroomChild`
`kitchen`	-	`Icons.Outlined.Kitchen`
`laundry`	`local_laundry_service`	`Icons.Outlined.LocalLaundryService`
`light`	`lightbulb`	`Icons.Outlined.Lightbulb`
`lock`	-	`Icons.Outlined.Lock`
`lock_open`	-	`Icons.Outlined.LockOpen`
`microwave`	-	`Icons.Outlined.Microwave`
`outdoor_grill`	-	`Icons.Outlined.OutdoorGrill`
`pc`	`computer`	`Icons.Outlined.Computer`
`pets`	-	`Icons.Outlined.Pets`
`power`	`power_settings_new`	`Icons.Outlined.PowerSettingsNew`
`remote`	-	`Icons.Outlined.SettingsRemote`
`router`	-	`Icons.Outlined.Router`
`sensor`	`sensors`	`Icons.Outlined.Sensors`
`sensor_door`	-	`Icons.Outlined.SensorDoor`
`sensor_window`	-	`Icons.Outlined.SensorWindow`
`shower`	-	`Icons.Outlined.Shower`
`solar_power`	-	`Icons.Outlined.SolarPower`
`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