Custom badges icon (Dynamic)

[Sim]

I need to customize badges.
It works in case of static like this:

  badges:
    blinds:
      badge:
        icon: f7:arrow_up_square_fill

But is there a syntax in case of dynamic badges like this Badge → Lock?

These F7 look better and more clear:

[rlkoshak (Rich Koshak)]

These are the Locations cards? As far as I know you can choose which ones to hide or show but you cannot modify the icons nor how they are shown.

[Sim]

I mean Settings → Pages → Page configuration → Code
I found the documentation here, but I can’t find how to modify the dynamic icons like ON OFF

This example is the roller shutter

[rlkoshak (Rich Koshak)]

Which page configuration? The Home Page?

That’s the place you can customize the Locations, Equipment and Properties tabs of the Overview Page.

Only the Locations tab has cards that have the status icons on them.

And there is no way to customize those icons, like I’ve already said.

[Sim]

Yes, the Home Page.

I found this:

[MainUI] Customisation of location-card badges

Seen there are a couple of questions in different threads about how i.e. lock or blinds badge could be reversed and since this feature is not (well) documented, would like to share some details here. From 3.1.0.M3 on, there is a way to influence how badges are displayed and when - for example: Living Room, 3 blinds, 2 closed - default configuration: [image] If we want to see blind’s badge when position > 0 (so invert the badge) we can write config: label: Home Page locations: - componen…

and it works.

It also points out:

The following badges could be overriden:

    alarms,
    lights,
    windows,
    doors,
    garagedoors,
    blinds,
    presence,
    lock,
    climate,
    screens,
    projectors,
    speakers.

So I’m trying to customize “lock” with lock-open and lock-closed

Default
badgeConfigs: {
alarms: { icon: ‘f7:exclamationmark_triangle_fill’ },
lights: { icon: ‘oh:lightbulb’ },
windows: { icon: ‘oh:window’, state: ‘open’ },
doors: { icon: ‘oh:door’, state: ‘open’ },
garagedoors: { icon: ‘oh:garagedoor’, state: ‘open’ },
blinds: { icon: ‘oh:cinemascreen’, state: ‘100’ },
presence: { icon: ‘oh:motion’, state: ‘on’ },
lock: { icon: ‘oh:lock’, state: ‘open’, stateOff: ‘closed’ },
climate: { icon: ‘oh:climate’, state: ‘on’ },
screens: { icon: ‘f7:tv’ },
projectors: { icon: ‘f7:videocam_fill’ },
speakers: { icon: ‘f7:speaker_2_fill’ }