MDI Icon in title/name of any card?

Configuration Frontend
4

You asked “how to add an icon to card’s title”.
Since only some conventional cards (like Entities; may be - ONLY Entities) do support an icon inside a title - you need to achieve it by other way.

5

Yes… I thought that there is something like from the official HA

6

Everything described in docs.
If it is not - in 99% it is unsupported, we need to find “ways”.

7

I was doing this but found that markdown cards load after almost everything else, so it creates unpleasant jumpiness on page load.

I’ve settled for using emojis instead of MDI icons for now but would also like to find a way to use MDI icons in stack title fields.

8

How to add an icon to a card’s title

изображение

1 Like
9

I forgot about the style content, wow, yes, true. I will try something. Thanks for remebering me this.

10

I was able to use the information you provided (and our below conversation) and this stack overflow post to come up with a solution I thought I should document and share. Instead of using a URL to an image you can instead encode an SVG icon.

  1. Pick an icon from this website (or any other SVG icon).
  2. Click on the icon and then click Copy SVG (next to download).
  3. Go to this website and paste the SVG code into Insert SVG. Copy the result from Ready for CSS.
  4. Paste this into the card-mod .card-header:before --icon field as shown below, removing background-image: from the beginning.

Using the following card config, with a stack inside a custom:mod-card inside a stack.

type: vertical-stack
cards:
  - type: custom:mod-card
    card:
      type: vertical-stack
      title: Security
      cards:
        - type: tile
          entity: lock.front_door_ble
    card_mod:
      style:
        ':first-child$': |
          .card-header {
            display: flex !important;
            justify-content: flex-start !important;
            gap: 12px;
            padding: 16px !important;
          }
          .card-header:before {
            width: 32px;
            --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eab-testing%3C/title%3E%3Cpath d='M4 2A2 2 0 0 0 2 4V12H4V8H6V12H8V4A2 2 0 0 0 6 2H4M4 4H6V6H4M22 15.5V14A2 2 0 0 0 20 12H16V22H20A2 2 0 0 0 22 20V18.5A1.54 1.54 0 0 0 20.5 17A1.54 1.54 0 0 0 22 15.5M20 20H18V18H20V20M20 16H18V14H20M5.79 21.61L4.21 20.39L18.21 2.39L19.79 3.61Z' /%3E%3C/svg%3E");
            -webkit-mask: var(--icon);
            mask: var(--icon);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            background: var(--primary-text-color);
            content: '';
          }

image

Edit: this method no longer works well with newer versions of card-mod on slower devices. See below for better method using button-card.

1 Like
11

It will work for sure if you wrap the card into mod-card.
Ofc you need to edit a path to the header element.

Entities card has a native “icon” option:

12

It will work for sure if you wrap the card into mod-card.

What do you mean by wrap the card into mod-card?

Entities card has a native “icon” option:

Huh. I should have just done that in the first place.

Also I figured out how to color the icon so I guess my solution would work now for custom icons, I’ll update my previous comment.

13

Check the link to my post in the card-mod thread.
Added examples for cards w/o ha-card.
Note that there not only a path to the header element was altered - a “margin-top” property was changed too, there is a difference between headers for cards like Entities & cards like vertical-stack…

1 Like
14

This is interesting. Will check it.
Well, I am not a CSS expert, also learning))).

1 Like
15

Thanks! I’ll update my previous comment again with the new solution.

Edit: nevermind. Wrapping the entire stack in a custom:mod-card does let you apply card-mod stylings to stacks, but it doesn’t seem to apply on page load and doesn’t apply until I go into edit mode.

Edit again: nevermind again, it was because I didn’t wrap the whole thing in another stack.

16

Well, after these “edits” have you got positive results with mod-card? ))
Haven’t checked your solution yet…

17

Yup! Thanks for your help. I’m going to update my dashboards to use this method to add icons to all of my stack titles later tonight.

1 Like
18

this is super interesting! thanks for re-editing and documenting the final solution

19

I’ve actually been having some problems with my method on newer versions of card-mod on my craptastic fire tablets, as the changes are not applied until everything else loads and causes the unpleasant jumpiness I was trying to avoid. At some point I want to try creating a custom card for section titles so styles can be applied before rendering to prevent jumpiness on page load.

1 Like
20

I’m switching to using button-card for custom titles. It’s much more performant than using card-mod to modify entities titles.

type: custom:button-card
name: Security
icon: mdi:shield-key
layout: icon_name
styles:
  card:
    - background-color: var(--background-color)
    - padding: 6px
  icon:
    - height: 32px
    - width: 48px
  name:
    - font-weight: 500
    - font-size: 24px
    - text-align: left
  grid:
    - grid-template-columns: min-content min-content
1 Like
21

cool idea!
i’ve been having issues with card_mod performance and reliability (paying a lot more attention to their documentation now) so this looks interesting

22

Simple way to add a quick visual recognition is to use emojis - no css or new card needed. Simply copy and paste.

2024-04-22_07-59
2024-04-22_07-591820×938 29.8 KB

23

Now that your using button card you can do it easily adding something like:


<ha-icon icon="mdi:water-percent"  style="width:3vw;height:3vw;"></ha-icon>

in a [[[ return … ]]]