Possible to overlap two mushroom template icons on top of each other?

[ncd]

My goal
I have sensors for AQI and CO2.
I want a succinct way to visualize the air quality so I’d love to have 2 icons, each colored independently based on each sensors and then moved so they “overlap”. Since the icons are different the combination of the 2 on top of each other does work.
E.g. imagine
mdi:blur (for AQI)
mdi:circle-outline (for CO2)
I can play with use card_mod and translate but while the icon moves very nicely, a blank chip card still takes up space.
I’m not sure if it’s possible to move the entire chip card and not just its icon.

This is what I’ve tried so far.

        card_mod:
          style: |
            ha-card {
              border: none;
              width: 0px;
              height: 0px;
              --chip-icon-size: 0.8em;
              translate: -49px 0px;
              --chip-background: none;
              box-shadow: none;
            }

Notice how there is a blank spot where the extra card is. Note: pls ignore the ugly color combinations, I’ll play with those separately to create something nicer.

If you can think of another way to “combine” those two statuses into a single location, happy to try something completely dfferent.

[LiQuid_cOOled]

Doin this with a chip card is a little more complicated, but this is one way to accomplish it

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:blur
    icon_color: |
      {{ '#FFD700' if is_state('light.bed_lights', 'on') else 'red' }}
    entity: light.pc_lights
    card_mod:
      style: |
        ha-card {
         --chip-icon-size: .8em;
         --chip-padding: 4px;
         width: 36px !important;
         border: none;
         border-radius: 50% !important;
         border: 3px solid {{ 'green' if is_state('light.pc_lights', 'on') else 'blue' }}!important;
            }
  - type: template
    icon: mdi:sun-clock
    icon_color: '#FFD700'
    entity: light.pc_lights
    card_mod:
      style: |
        ha-card {
         --chip-background: none;
         --chip-icon-size: .8em;
         border: none;
           }

[ncd]

Ah thanks what a great and much more elegant solution!

[LiQuid_cOOled]

No problem, happy to assist! I actually stumbled across a 3rd way while testing out different resolutions for your scenario.

[ncd]

Oh care to share?

[LiQuid_cOOled]

@LiQuid_cOOled

'#FFD700'

Sure, I used a layout card in grid mode to layer two chip cards. In this example the first icon is actually made up with two different icons.

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto
  grid-template-rows: auto
  grid-template-areas: |
    "a1"
cards:
  - type: custom:mushroom-chips-card
    view_layout:
      grid-area: a1
    chips:
      - type: template
        icon: mdi:circle-outline
        icon_color: orange
        card_mod:
          style: |
            ha-card {
            --chip-background: transparent;
            --chip-icon-size: 1.2em;
            --chip-padding: 4px;
             --chip-border-width: 0;
             opacity: 0.7;)
            }
  - type: custom:mushroom-chips-card
    view_layout:
      grid-area: a1
    chips:
      - type: template
        icon: mdi:blur
        icon_color: blue
        card_mod:
          style: |
            ha-card {
            --chip-background: transparent;
            --chip-icon-size: .9em;
             --chip-border-width: 0;
             }
      - type: template
        icon: mdi:blur
        icon_color: green
        card_mod:
          style: |
            ha-card {
            --chip-background: transparent;
            --chip-icon-size: .9em;
             --chip-border-width: 0;
             }
      - type: template
        icon: mdi:lightbulb-auto
        icon_color: blue
        card_mod:
          style: |
            ha-card {
            --chip-background: transparent;
            --chip-icon-size: .9em;
             --chip-border-width: 0;
             }
      - type: template
        icon: mdi:sun-clock
        icon_color: yellow
        card_mod:
          style: |
            ha-card {
            --chip-background: transparent;
            --chip-icon-size: .9em;
             --chip-border-width: 0;
             }

[ncd]

@LiQuid_cOOled

grid-template-areas: |
    "a1"

Is it this part that does it?

[LiQuid_cOOled]

Yes, that names a grid area and then I assign two chips to the same grid area. The grid area can be called anything you want as long as it matches what you assign to then individual cards.

view_layout:
      grid-area: a1

For example add b1 and change one of the assigned chips to b1 and you’ll see the overlayed chip shift right. You can see the 5 chips that were previously represented as 4 chips.

grid-template-areas: |
   "a1 b1"

view_layout:
      grid-area: b1