How to assign a picture to a button on the dashboard?

Hi there, I have a button on y main dashboard I am using to open another dashboard ( A calendar).
I would like to use a customized picture (like the google calendar icon for example) instead of the standard one :

image

Here is my yaml code, as you can see, I am using a standard mushroom chips card …
I am not sure what entity I need to put there, I selected my google calendar …, and it does the job meaning forwarding le to the right dashboard ///
As you can see the default is the “icon: mdi:calendar” …

How Do I need to do to use my own picture there ?

      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: calendar.Mycalendar_gmail_com
            tap_action:
              action: navigate
              navigation_path: /lenovo-m10-plus-calendrier
            content_info: name
            icon: mdi:calendar
            use_entity_picture: false
            name: Calendrier
        view_layout:
          grid-area: head2
        card_mod:
          style: |
            ha-card {
              background: transparent;
            }

Many Thanks !!

You can do this two different ways.

The first way would be to use a custom:button-card instead. Just upload the picture you want to use to HA and then style the card the way you want it. I created a folder for my images called “my_images” in the “config” directory.

type: custom:button-card
entity: light.bcl_local
entity_picture: /local/my_images/power92_01.jpg
show_entity_picture: true
styles:
  card:
    - border-radius: 30%
    - background-color: white

The second way to do it is with the FontAwesome integration found on HACS. With this you can upload your own icon. First you’ll have to install the integration and then you’ll have to create a custom_icons folder in your HA “config” directory. Then go to the Iconify website and search “Google Calendar”, click on the colored Google calendar icon, and then click download. You then have to upload the downloaded icon to the folder you just created for icons. Once uploaded, you can use the icon by using icon: fapro:(NAME_OF_ICON)#fullcolor. If you don’t include #fullcolor immediately after the name of your icon it will not be in color.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: light.bcl_local # I changed so it works on my HA
    tap_action:
      action: navigate
      navigation_path: /lenovo-m10-plus-calendrier
    content_info: name
    icon: fapro:logos--google-calendar#fullcolor
    use_entity_picture: false
    name: Calendrier
view_layout:
  grid-area: head2
card_mod:
  style: |
    ha-card {
      background: transparent;
    }

Thanks a lot @almighty59 and sorry for the late reply …

You advise using the button card, but is it possible to set it as small as I want like to be in a header of a dashboard, like in my screenshot ?

But for the moment I have used a mushroom template card, where I was able to assign an icon (I took a screenshot and uploaded the icon in HA

          - type: custom:mushroom-template-card
            primary: Agenda
            secondary: ''
            icon: mdi:home
            picture: /local/Google-agenda.PNG
            tap_action:
              action: navigate
              navigation_path: /lenovo-m10-plus-calendrier
            fill_container: true
            multiline_secondary: false
            card_mod:
              style: |
                ha-card {
                  background: transparent;
                  border: 0px;
                }
          - type: custom:mushroom-template-card
            primary: Agenda (TEST)
            secondary: ''
            icon: mdi:home
            picture: /local/Google-agenda.PNG
            tap_action:
              action: navigate
              navigation_path: /lenovo-m10-plus-test
            fill_container: true
            multiline_secondary: false
            card_mod:
              style: |
                ha-card {
                  background: transparent;
                  border: 0px;
                }

image

But thanks for the iconify web site, I didn’t knew it !!

Yes, it’s possible to adjust the size. The custom button card docs explain various ways to do it. In the example below, I use a custom field within the style of the card to display a small icon that shows whether the motion detection is on or off. The icon changes based on the state. (I eliminated some of my other code so it’s easier to see what I did.)

image

- type: custom:button-card
  template:
    - default_button_01
  entity: light.inovelli_red_dimmer_bathroom
  name: "OFF"
  styles:
    card:
    custom_fields:
      motion:
        - position: absolute
        - right: 10px
        - bottom: 5px
  custom_fields:
    motion: |
      [[[ if (states['input_boolean.mss_bathroom_light'].state == 'on')
        return `<ha-icon
          icon="mdi:motion-sensor"
          style="width: 18px; height: 18px; color: rgba(255, 255, 255, 1.0 );">
          </ha-icon>`
      else if (states['input_boolean.mss_bathroom_light'].state == 'off')
        return `<ha-icon
          icon="mdi:motion-sensor-off"
          style="width: 18px; height: 18px; ">
          </ha-icon>`
      else return ''  ]]]     

However, in your case I would actually try using the FontAwesome integration and upload the Google Calendar icon. I think it would be better because you have more options and it’s an actual icon like you wanted (opposed to a pic) which you can use with your Mushroom card.