I had always a sore eye when looking map-card with zone-entity icons covering people faces when person was at home, work etc. I did not find a one stop answer for making map-card icons semi transparent/ opaque, so I hope this helps someone looking to do same thing.
You need:
after adding the map card to lovelace, insert following code in the card code editor:
card_mod:
style: |
ha-card {
--card-mod-icon-color: rgba(0,0,0,0.3);
}
The rgba values first 3 digits are rgb-colours and the last 4th digit is the opacity.
For example you could have map-card code like this:
type: map
entities:
- zone.home
- person.you
- person.me
card_mod:
style: |
ha-card {
--card-mod-icon-color: rgba(0,0,0,0.3);
}
Hope this help, happy Home Assistant tinkering!