What is the proper way to change mdi icon size with the release 0.110.0?

Development
1

Some time ago I have created a small cusom lovelace card — https://github.com/bessarabov/animated-consumption-card

Here is how it looked before the 0.110.0:

Screenshot 2020-05-21 at 14.26.32

And here is how it looks with 0.110.0:

Screenshot 2020-05-21 at 14.16.31

I know that in 0.110.0 some changes were implemented how the frontend is working with mdi icons.
What is the way one should use to change the size of mdi icons? I would like to find a way to specify the size that is working in version before 0.110.0 and after 0.110.0.

The way that I was using is just to use css width & height on the element with icon:

html:

<ha-icon class="acc_icon" icon="mdi:electron-framework"></ha-icon>

css

.acc_icon {
    height: 80px;
    width: 80px;
    border: 1px solid black;
    border-radius: 100px;
    padding: 22px;
    color: var(--primary-text-color);
    border-color: var(--primary-text-color);
}
1 Like
2

--mdc-icon-size: 80px; for 0.110+

for pre and post 0.110 this might work:

--mdc-icon-size: 80px;
height: 80px;
width: 80px;
1 Like
3

Thank you! Adding --mdc-icon-size:⋅80px; made a situation a bit better:

Screenshot 2020-05-21 at 14.35.42

But this is still not the way I expect this card to work. I will try to find some workaround to fix it.
Maybe this is the same problem that is described in https://github.com/material-components/material-components-web-components/issues/1071

I will try to find some solution, but if will be glad to hear some recommendations if anybody has them.

4

This is the fix that I’ve implemented — https://github.com/bessarabov/animated-consumption-card/commit/9ce699a5d7e3bfae3deedbd8450fada29baeb784

I have tested it with 0.110.0 and 0.107.4. On both versions the card is working as execpeted.

5

Where did you implement this bit of code?