Is there a way to get entities card without the icon?
Setting
icon: ’ ’
remove the icon but leaves a big empty space there. I have tried styling with card-mod but can’t seem to “target” ha-icon in any meaningful way.
Hello,
I would like to do the same.
Did you find a solution?
Best regards
I am sorry, this was such a long time ago I forgot which card I wanted this for.
I tried now creating an entity card and for the icon field I input something like
hass:none
(none doesn’t exists but it will not show an error and the icon disappears)
So code would be something like this:
type: entity
entity: sensor.pet_flap_magic_portal_battery_level
name: asdf
icon: 'hass:none'
icon: 'hass:none' would be identical to icon: ''.
Both leave a big empty space to the left of the entity name, as you stated yourself in your very first post.
You can solve it using card_mod:
[Update 20230716: Improved version targeting .info instead of .text-content to remove margin-left]
type: entities
entities:
- entity: sensor.dwd_pollen_birke
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
margin-left:0 !important;
}
- entity: sensor.dwd_pollen_esche
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
margin-left:0 !important;
}
- entity: sensor.dwd_pollen_erle
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
margin-left:0 !important;
}
5 Likes
This is a great fix and worked absolutely as advertised. However I ran into a minor snafu when I added secondary_info: last-changed to the entity. It seems to move the text half way back in as shown:
Any advice as to how to compensate for this unintentional indentation?
(Tried a negative margin-left value FTW, but that did not have any effect)
By adding secondary_info you added additional HTML markup that was not covered by the CSS that I have proposed in my posting. This has nothing to do with any card-mod issue. So please remove (close) your issue in the tracker.
The following improved version should work with and without secondary_info. Please try:
- entity: sensor.dwd_pollen_birke
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
display: none;
}
.info {
margin-left:0 !important;
}
I will also update my original posting, as this definitely is a better solution.
If you want to analyze the HTML markup and the corresponding CSS for yourself, I strongly recommend that you use the Developer Tools of the Google Chrome browser. Open your dashboard in Chrome, press F12, use the tool in the top left (“Inspect”, marquee with arrow icon) and click the element in the dashboard that you want to inspect (i.e. your wrongly indented text). The Dev Tools will show you the underlying HTML together with plenty of information about the CSS that affects it. This surely is a rabbit hole with many things to learn, but you will get a much better understanding and improve your knowledge. Enjoy!
@Jpsy, that did the trick - this worked like a charm, closed the issue and I’ll have to have a look at CSS hacking eventually, yet in the interim thanks a bunch for saving me a ton of time figuring this out.
1 Like
I use this:
type: entities
entities:
- entity: sensor.xxx
- entity: sensor.yyy
- entity: sensor.zzz
card_mod:
style:
hui-sensor-entity-row:
$ hui-generic-entity-row $: |
state-badge {
display: none;
}
.info {
margin-left:0 !important;
}
1 Like
This may only work with entities of the “sensor” domain.
Besides, it decreases a height of a row.
1 Like
Hello! I’ll revive this thread because I’m getting crazy. I’m trying to remove the icon from an input selector, which is inside an horizontal “vertical-stack-in-card”:
type: custom:vertical-stack-in-card
horizontal: true
card_mod:
style: |
:host {
--stack-card-margin: 0px;
--ha-card-border-radius: 12px;
--ha-card-border-width: 0px;
}
cards:
- type: entities
entities:
- input_select.alarm_monday
card-mod:
style:
hui-generic-entity-row$: |
state-badge {
display: none !important;
}
- type: entities
entities:
- input_select.alarm_tuesday
As far as I managed to understand, I should use hui-generic-entity-row$ to get the shadow root inside that object, and then I should be able to use display: none !important; on the state-badge, which is inside the shadow root.
The first mod (which removes the borders) works, the second one does nothing. Could you help me please?
Start with fixing a typo. Should be “card_mod”.
Oops you’re right, still no luck though
You are card-modding the entity row, so you need to add another level. This works:
hui-input-select-entity-row $:
hui-generic-entity-row$: |
state-badge {
display: none !important;
}
2 Likes
Or just shift a card-mod code to the right.
1 Like
It works! Thanks a lot 
even better!