search

google / material-design-icons

Material Design icons by Google (Material Symbols)
http://google.github.io/material-design-icons/
Apache License 2.0
50.65k stars 9.58k forks source link

Extra Height because of Font Metrics #1793

Closed abhishek-junghare closed 1 month ago

abhishek-junghare commented 1 month ago

https://github.com/user-attachments/assets/166d78e6-6083-43e6-929b-0e84438f2bf1

  1. The black rectangle represents the visual and on screen space taken by the icon
  2. The red rectangles represent the extra portion taken by the icon because of font metrics

The issue

The icons have extra space at the top and bottom due to font metrics. Visually and in screen pixels, the icon occupies the same height, but when selected like some text with a cursor, the extra space becomes apparent.

Does this even matter?

In most cases, this may not be an issue, but consider the following use case:

  1. The icon size is 300px, possibly used in a large, innovative CTA section featuring just the icon.
  2. The icon is wrapped in a link tag <a>. Now, if there are background colors for both the normal and hover states, the background color will change even if I'm in the red area, which is outside the visual icon area within the black rectangle. As a result, the hover effect is activated even when the cursor isn't visually over the icon area.

What I tried

line-height to both 0 and 1 vertical-align to middle/center (and similar properties)

What I suggest

Since, this is only icon-font, and the text characters won't even matter. Setting Ascender to same as CapHeight, and Descender to 0 wouldn't affect the rendering the icons.

Other

Yes, I cannot know how this change will affect the rendering of the icon and its impact on sites that are already using Google icons. This is just a suggestion.

tphinney commented 1 month ago

Hi Abhishek,

So, yes, that standard area is for icons at normal weight and grade. However, bolder weights and heavier grades can extend past that. The font metrics have to be set to allow for that, what with it being a variable font.

abhishek-junghare commented 1 month ago

I just checked, and the apps_outage icon seems to be an example of what you're referring to.

However, this creates another issue. Since the icon extends beyond the CapHeight & into the Descender area, applying a background color to the icon causes that extra portion to overflow visibly.

I could wrap the icon inside a <div>, but the space it occupies will remain the same, so the appearance won't change. To resolve this, I would need to add extra padding within the wrapper <div>.

'wght' 700, 'GRAD' 200

image