white-balance-sunny is not centered

[Mariusthvdb]

Where are you experiencing this bug?

Somewhere else

What is the issue you are experiencing?

just posting this as a preliminary quest for perfect centered icons.

As it happens in Homeassistant we use css animation on the icons via plugin called card_mod.

a lot of mdi icons are centered nicely, some though are not while one would expect the form factor to indicate so. like weather-sunny.

I am aware this is part of a larger family of weather icons, but the -sunny being so symmetrical, feels 'buggy' because of that.

compared to the circle family icons:

made by @Ildar_Gabdullin in https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3179

please have a look if this is an issue you can sympathize with?
thanks!

[mririgoyen]

weather-sunny definitely is centered:

But white-balance-sunny, which is what is in your preview, is not:

[Mariusthvdb]

You're right! I typo'd... sorry bout that.

would make it even easier to fix maybe ;-) since its a loner?

[mririgoyen]

It's fixed. Won't make it until the 6.9 release.

[Mariusthvdb]

magic. thank you very much!

[ildar170975]

very fast, thank you

[Mariusthvdb]

as a followup please this: where can we check these icon file designs, like you posted above, with the grid-lines behind them? Asking because several more icons show this:

And I like to pinpoint it correctly: is it the icon, or is it some css issue in HA core. And raise an issue in the correct repo ;-)

[mririgoyen]

Pump is perfectly aligned to the grid.
[![pump](https://materialdesignicons.com/icon/pump)](https://materialdesignicons.com/icon/pump)

[Simran-B]

The icons are generally designed to be visually centered. In some cases, the base icon is shifted to make room for a modifier, so that the icon is recognizable and still fits on the canvas. The icons are not designed to rotate around what would be the most meaningful center based on what's depicted. For many icons, it would not even be possible to shift them so that the ideal center is at the canvas center due to the constraints of the canvas and material design guidelines, in particular the grid alignment for pixel-perfect shapes.

If you want icons to visually rotate around their semantically correct center, then determine this center and use it as rotation axis instead of the geometric canvas center. Note that this center can be off-grid.

[Mariusthvdb]

Thanks. Aware not all icons are suited for rotating effects. Ofc. But those that are, like above, and many other circular icons, should not be positioned off center in Ha.

Somehow there are other issues at hand that cause that to happen , and I hope to select a few of those icons to create a working test setup for further analysis.

The issues also seem to differ between browsers and/or desktop vs mobile.

Ruling out icon issue by using these pixel perfect icons is really helpful and a first step in the process.

anyways, thanks for chiming in. I’ll will try to do as you suggest, because currently I wouldn’t know how (-)