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 :

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;
}

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.)

- 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.