Add an icon to a service-button in a picture element?

Configuration Frontend
1

Hi,

I created this picture element which works fine:

type: picture-elements
elements:
  - type: service-button
    title: NAS WOL
    service: wake_on_lan.send_magic_packet
    service_data:
      mac: 01:23:45:67:89:AB
    style:
      left: 25%
      top: 25%
      transform: scale(1,1)
  - type: state-icon
    entity: light.basement
    style:
      left: 50%
      top: 50%
      transform: scale(2,2)
    tap_action:
      action: toggle
image: /local/floorplan/basement.png

But I would like to put an icon instead of the title of the service-button, is it possible?

2
  1. Place an icon near the “service-button” element, specify " " (space) name for the button, add same tap_action for the icon.
  2. By using card-mod - hide a label for the “service-button”, add an icon as “:before” (or “:after”) pseudoclass.
  3. Do not use “service-button”, place an icon instead and specify same tap-action.
3

Thank you @Ildar_Gabdullin,

I installed card-mod but I don’t find how to hide an item :thinking:

4

OK I found how to hide the service-button.

But the icon replacement doesn’t work on service-button.

But it works on the other icon I added as you put in 1. (mdi:power replaced by mdi:bed)

type: picture-elements
elements:
  - type: service-button
    title: NAS WOL
    service: wake_on_lan.send_magic_packet
    service_data:
      mac: 01:23:45:67:89:AB
    style:
      left: 25%
      top: 25%
      transform: scale(1,1)
    card_mod:
      style: |
        :host {
          display: none;
          --card-mod-icon: mdi:bed;
        }
  - type: icon
    icon: mdi:power
    title: ' '
    style:
      left: 25%
      top: 25%
      transform: scale(1,1)
    tap_action:
      action: call-service
      service: wake_on_lan.send_magic_packet
      service_data:
        mac: 01:23:45:67:89:AB
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:bed;
          }
  - type: state-icon
    entity: light.basement_1
    style:
      left: 50%
      top: 50%
      transform: scale(2,2)
    tap_action:
      action: toggle
image: /local/floorplan/basement.png
5

I did not mean to replace an icon. Nothing to replace if it is not supported.

I proposed three methods. One of them is with card-mod and adding a pseudo-class. For details - go to card-mod thread → 1st post → link at the bottom → find a section about using “:after” and “:before”.
But probably this is the hardest way for you - so consider other 2 methods first.

6

Yes I saw that, thank you. It works perfectly in a basic card but not in a picture-element

7

Adding pseudo classes possible to all elements.
If a particular example was not provided, it does not mean that it is impossible.

8

OK.
I continue trying and trying (I never worked with css etc) and I will inevitably find one day.

9

Try, make mistake, try again - this this the Way.
I myself never dealt with css before card-mod.

10

I’m reading your post, now you’re an expert for sure, I’m sure my need is nothing for you.

11

I am not a native English speaker, may not understand all expressions properly.

I advise you to consider a simpler way - replace the service-button by a state-icon with tap_action.
Using card-mod is a more complex task, you will learn it step by step, but for now you will have a rather good working solution.