Size of lovelace view icons

Configuration Frontend
1

Team,
I would like to increase the size of lovelace view ICONS.
In HTML I can make a change that does exactly what I want but the question is: (how) can this be done in the theme YAML?

:host {
    display: var(--ha-icon-display, inline-flex);
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    fill: currentcolor;
    width: var(--mdc-icon-size, 44px);
    height: var(--mdc-icon-size, 24px);

The big change is the width: from 24px to 44px. Result:
image
instead of
image

The text is fine as is.

Any idea how I can make these icons appear BIGGER?

2

Just found out that if, in the theme.yaml, the following entry is added:

  mdc-icon-size: 70px
  • a restart of HA, the icons are BIG

Unfortunately, the entity icon size is also BIG

(top) View icons:

    <ha-icon>
        <ha-svg-icon></ha-svg-icon>
    </ha-icon>

Entity icons:

    <ha-state-icon style="" data-domain="light" data-state="off">
        <ha-svg-icon></ha-svg-icon>
    </ha-state-icon>

But the theme.yaml “mdc-icon-size: 70px” controls both sizes.
Is there a way to only increase the icon size for “”?

3

Do you want to change an icon’s size on a header?
image
image
It can be done by card-mod-theme.
Go there, ask a question (do not use @) - I’ll give you a solution.

1 Like
4

done! (here)

5

Here