Dynamic icon of group not showing correct

e_bouwman · December 16, 2025, 12:58pm

I am using several groups for showing the status of my windows and doors.

For the door group it does not show the correct status of the icon. When all doors are closed the icon shows open. When a door is open it still shows open (no change).

For the individual members of the group the icons shows correct.

When changing the group icon from door to window it is showing the correct status.

Any idea how to solve this?

rlkoshak · December 16, 2025, 3:23pm

The way OH’s built in dynamic icons work can be found at Items | openHAB. The important bit is

Dynamic icon filenames follow the pattern below:
<name>-<state>.<extension>
<name> - the name of the icon

-<state> - the Item state the icon maps to in lowercase (e.g. “-on” or “-off”, “-open” or “-closed”)

<extension> - bitmap (png) or vector graphic (svg) icon file extension (see above)

Dynamic icon sets may consist of as many state-specific icon files as needed. Each set must meet the following criteria:

A default icon is mandatory. The default icon filename is the name of the icon without a state (e.g. switch.svg)

Icon filenames must follow the naming restrictions given for icons above

The state name must reflect the Item’s raw state. Transformations applied in the state presentation definition of the Item have no influence on icon selection.

The state portion of the icon name must be in lowercase letters

The most important part of that is the -<state> part.

When you look at the door icon in the docs at Icons | openHAB by hovering your mouse over the icon you’ll see “door-open, door-closed”. That means this icon is only configured to support the states OPEN and CLOSED.

Your Group Item is a Group:Number:Sum Items. That means it’s state is a number and never OPEN nor CLOSED. So the default icon is all that will ever be shown.

Therefore, your options are:

create a separate Group:Contact:OR(OPEN,CLOSED)
create custom icons using the docs I linked to above that works with numbers
if using the Item in a MainUI widget, use an expression to choose the icon to show based on the state of the Group

e_bouwman · December 16, 2025, 6:58pm

Thanks for the guidance.

I have created a separate group like you proposed. The icon is now changing as expected.

I would also have the number of windows open shown on the overview.

Already edited item metadata: statedescription → pattern %d. This does not work.

Any other solution available.

rlkoshak · December 16, 2025, 7:41pm

It depends on what you mean by “overview”.

If you mean the Locations, Equipment, and Properties tabs of the Overview page, that’s not really how those work. Those represent the physical layout of your home and no door can be in two places at the same time.

If you mean the first tab of the Overview page, you need to create a widget to display the information you want the way you want to and put it on that page. Since this will use multiple Items in one widget, you’ll almost certainly need to use expressions (see the link above). There are lots of examples in the marketplace that show relatively simple widgets like this and the Getting Started Tutorial shows how to create a couple more.

If you mean Sitemaps, just put both Group Items on the sitemap as a Text element.

If you mean something else, . You have to be more specific.

e_bouwman · December 16, 2025, 8:04pm

To be more specific I would like to have it like I had it already (but than with the correct icons state). See the picture below that shows the widget I am using to display the state.

Would be nice to have the open doors in a number a below.

rlkoshak · December 16, 2025, 8:24pm

I don’t know what I’m looking at with this screen shot.

But the only way you can have both the count and the icon is to use two different Items on two different rows, or to create a custom widget for the Group which takes the text from the Number Group Item with the count and sets the icon based on the state of the other Contact Group Item (or based on the value of the Number Group Item).

e_bouwman · December 16, 2025, 8:55pm

The screenshot shows a list card widget with label list items.

Will try to create a widget with the count and the state. When it is working I will post an update.

Thanks for all your help.

rlkoshak · December 16, 2025, 9:07pm

If it’s just a regular List card (not an oh-repreater) using the default widgets for the items, it might be simple enough to set the “default list item widget” metadata on the Group Item. Choose an oh-list-item widget. Then you can set the icon using an expression (e.g. something like =(#'Doors' > 0) ? 'oh:door-open' : 'oh:door-closed') and that might be it. If not, you can set the item field which should be enough.

If these list item widgets are being defined inline, you can do the same, just use an expression for the icon like shown.

Note, I just typed in this expression, it might have a typo. #'Doors' is a shortcut for the numeric state of the Item Doors in widget expressions.

ubeaut · December 17, 2025, 5:15am

I have this on my overview:

and when I hover the mouse it shows what the icons are.

Here is the code:

component: oh-cell
config:
  action: popup
  actionModal: widget:Status-list-metadata-door-window-blinds
  actionModalConfig:
    item: gDoors
    prop1: DOOR
  footer: Windows Doors Curtains Blinds Shed
  icon: f7:menu
  title: Click to find the open items
slots:
  background:
    - component: f7-block
      config:
        class:
          - card-opened-fade-out
        style:
          bottom: 10px
          position: absolute
          right: 10px
      slots:
        default:
          - component: f7-chip
            config:
              iconColor: "=((items.Gate_opener_status.state) === 'OPEN') ? 'red' : 'green'"
              iconF7: "=((items.Gate_opener_status.state) === 'OPEN') ? 'lock_open' : 'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=((items.Gate_opener_status.state) === 'OPEN') ? '1' : ''"
              textColor: "=((items.Gate_opener_status.state) === 'OPEN') ? 'red' : 'green'"
              tooltip: Gate
              visible: =items.Gate_opener_status.state === 'OPEN'
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gwindowscount.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gwindowscount.state) > 0) ? 'window' : 'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gwindowscount.state) > 0) ? items.gwindowscount.state :
                ''"
              textColor: "=(Number(items.gwindowscount.state) > 0) ? 'red' : 'green'"
              tooltip: Windows
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gdoorcount.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gdoorcount.state) > 0) ? 'door_front' : 'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gdoorcount.state) > 0) ? items.gdoorcount.state : ''"
              textColor: "=(Number(items.gdoorcount.state) > 0) ? 'red' : 'green'"
              tooltip: Doors
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gcurtaincount.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gcurtaincount.state) > 0) ? 'curtains' : 'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gcurtaincount.state) > 0) ? items.gcurtaincount.state :
                ''"
              textColor: "=(Number(items.gcurtaincount.state) > 0) ? 'red' : 'green'"
              tooltip: Curtains
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gblindscount.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gblindscount.state) > 0) ? 'roller_shades' :
                'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gblindscount.state) > 0) ? items.gblindscount.state : ''"
              textColor: "=(Number(items.gblindscount.state) > 0) ? 'red' : 'green'"
              tooltip: Blinds house
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gwindowsshedcount.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gwindowsshedcount.state) > 0) ? 'window' : 'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gwindowsshedcount.state) > 0) ?
                items.gwindowsshedcount.state : ''"
              textColor: "=(Number(items.gwindowsshedcount.state) > 0) ? 'red' : 'green'"
              tooltip: Windows shed
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gblindscountshed.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gblindscountshed.state) > 0) ? 'roller_shades' :
                'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gblindscountshed.state) > 0) ?
                items.gblindscountshed.state : ''"
              textColor: "=(Number(items.gblindscountshed.state) > 0) ? 'red' : 'green'"
              tooltip: Blinds shed
          - component: f7-chip
            config:
              iconColor: "=(Number(items.gshedcounter.state) > 0) ? 'red' : 'green'"
              iconMaterial: "=(Number(items.gshedcounter.state) > 0) ? 'directions_car' :
                'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=(Number(items.gshedcounter.state) > 0) ? items.gshedcounter.state : ''"
              textColor: "=(Number(items.gshedcounter.state) > 0) ? 'red' : 'green'"
              tooltip: Doors shed
          - component: f7-chip
            config:
              iconColor: "=((items.SonoffTH16_door_status.state) == 'OPEN') ? 'red' : 'green'"
              iconMaterial: "=((items.SonoffTH16_door_status.state) == 'OPEN') ? 'warehouse' :
                'lock'"
              iconSize: 18
              style:
                --f7-chip-bg-color: rgba(255, 255, 255, 0)
              text: "=((items.SonoffTH16_door_status.state) == 'OPEN') ? '1' : ''"
              textColor: "=((items.SonoffTH16_door_status.state) == 'OPEN') ? 'red' : 'green'"
              tooltip: Door container

The counter items are set up like this:
Screenshot from 2025-12-17 16-12-23

I don’t know if this is what you are looking for but feel free to modify it.

The widget I use when the cell is clicked Status-list-metadata-door-window-blinds:

uid: Status-list-metadata-door-window-blinds
tags: []
props:
  parameters:
    - default: door
      description: Tag group name
      label: Tag name to search
      name: prop1
      required: true
      type: TEXT
    - default: WINDOW
      description: Tag group name
      label: Tag name to search
      name: prop2
      required: true
      type: TEXT
    - default: BLINDS
      description: Tag group name
      label: Tag name to search
      name: prop3
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Mar 2, 2025, 8:54:04 AM
component: oh-list
config:
  style:
    --f7-list-item-after-font-size: 12px
    --f7-list-item-after-font-weight: bold
    --f7-list-item-after-text-color: var(--f7-text-color)
    min-width: 250px
slots:
  default:
    - component: oh-repeater
      config:
        display: contents
        for: index
        itemTags: =props.prop1
        sourceType: itemsWithTags
      slots:
        default:
          - component: oh-list-item
            config:
              badge: =loop.index.state
              badgeColor: '=(loop.index.state === "OPEN") ? "red" : "green"'
              icon: '=(loop.index.state === "OPEN") ? "f7:lock_open" : "f7:lock"'
              iconColor: '=(loop.index.state === "OPEN") ? "red" : "green"'
              iconUseState: true
              title: =loop.index.label
    - component: oh-repeater
      config:
        display: contents
        for: index
        itemTags: =props.prop2
        sourceType: itemsWithTags
      slots:
        default:
          - component: oh-list-item
            config:
              badge: =loop.index.state
              badgeColor: '=(loop.index.state === "OPEN") ? "blue" : "green"'
              icon: '=(loop.index.state === "OPEN") ? "f7:lock_open" : "f7:lock"'
              iconColor: '=(loop.index.state === "OPEN") ? "red" : "green"'
              iconUseState: true
              title: =loop.index.label
    - component: oh-repeater
      config:
        display: contents
        for: index
        itemTags: =props.prop3
        sourceType: itemsWithTags
      slots:
        default:
          - component: oh-list-item
            config:
              badge: =loop.index.state
              badgeColor: '=(loop.index.state === "OPEN")||(loop.index.state === "100") ?
                "orange" : "green"'
              icon: '=(loop.index.state === "OPEN")||(loop.index.state === "100") ?
                "f7:lock_open" : "f7:lock"'
              iconColor: '=(loop.index.state === "OPEN")||(loop.index.state === "0") ? "red" :
                "green"'
              iconUseState: true
              title: =loop.index.label

It looks like this:

e_bouwman · December 17, 2025, 7:07am

Thanks again for the guidance.

The below expression is the one working for me.

=Number(items[‘Deuren’].state) > 0 ? ‘door-open’ : ‘door-closed’