Remove svg.svg class, restore .rss-icon

[silverwind]

Fix regression from #24476 where the svg.svg class misaligns SVG icons across the site and streched buttons unintentionally in vertical height.

Before (button 30.3px):

After (button 30px):

vertical-align: middle is not suitable to align icons to text because

Aligns the middle of the element with the baseline plus half the x-height of the parent.

Example of vertical-align: middle from MDN:

So I think the existing vertical-align: text-top is generally still the best bet:

[wxiaoguang]

Sorry I can't really see a different here.

Maybe it needs other fine tunes.

I would suggest to have a framework level solution for "button svg icon margin magic", instead of adding a lot of "gt-xxx", it doesn't look good to me.

---

So I think the existing vertical-align: text-top is generally still the best bet:

I guess that's because the icon height and line-height doesn't match? If we can give these icons proper height, no trick any more IMO?

[wxiaoguang]

I won't block it (and I admit that my approach is not good enough, and I missed another ".svg" class because it's in a separate file .... )

But I hope this is the last time for the "svg icon margin/align trick".

Really looking forward to a framework level clear solution.

[silverwind]

As I said, it's likely not possible to satisfy all cases with a "global" style. The only true vertical centering is align-content: center which only works in flexbox so is not applicable everywhere, and it does need to be on the parent.

*:has(.svg) { align-content: center } is the best I can think of, but it still needs the flex parent and I don't think :has selector can be made only match a direct child.