Change Icon with Card Mod within a Tabbed Card?

Configuration Frontend
1

I recently learned of the Tabbed Card, but I’m struggling on how to possible change the icon size and image using Card Mod.

The tabbed card has options to let you add to change the icon size. But I am trying to figure out how to use Card Mod where I can then possibly change both the icon image and color when selecting a particular tab. Can that be done with this card?

2

Look in this post for a possible solution

:small_blue_diamond: Card-mod - Add css styles to any lovelace card - Share your Projects! / Dashboards & Frontend - Home Assistant Community

1 Like
3

Thank you for that link, and there are lots of good examples in manipulating the tab. I just don’t seem to know enough on where to find all of the proper code and syntax, and can’t seem to figure out how to change the icon size.

I tried with this below, but can’t get the icon size to change.

type: custom:mod-card
card_mod:
  style:
    tabbed-card:
      $: |
        mwc-tab:nth-child(1) ha-icon {
          --card-mod-icon: mdi:car;
          --card-mod-icon-size: 50px;
         }
         mwc-tab:nth-child(2) ha-icon {
           --card-mod-icon: mdi:account;
         }
4

add the whole card code and make sure to indicate with a screenshot what you want and/or what is not working, just the code does not do a thing (for me at least)

5

I strongly suggest you to discuss card-mod related things in that main thread instead of creating new threads. Also, no need to use card-mod to set an icon.

6

Follow the expert’s advise is the best thing :slight_smile:
In the meantime… what is working with above is : --mdc-icon-size: 20px

1 Like