Make 'H' bigger

[karmatosed]

The 'H' on heading block in block library has padding issues compared to others.

[Soean]

Dashicons (Like the heading "H") are 20x20 px, all others are 24x24 px, not sure why this was added: https://github.com/WordPress/gutenberg/blob/3c0b12be9090975421cdaa68dc03e15c4913721f/packages/components/src/icon/index.js

[karmatosed]

I think this doesn't need design as it can be changed to fix this. Please add back in the label if that is the case.

[sarahmonster]

For reference, this is part of the issue:

Here's what it looks like "sized up" to 24px:

Definitely better, but still feels a wee bit out of place due to the heavy lines. To fit better with the other icons used, it feels as though it should be outlined.

Here are a few potential approaches to solving the problem:

1. Change the H icon in Dashicons itself to use less padding inside the box. This may cause inconsistency with the Dashicon set, and requires hunting down the icon in Trac. (The icon doesn't appear in the Dashicons Github repo or in the Dashicons website, oddly enough.)
2. Use a custom icon, designed to the Material grid, for the Heading block. This creates a wee bit more overhead, but does allow us to tweak the icon a bit further so it better aligns with the styling we're using for other block library icons. (For instance, we could adjust the width of the lines or use an outline style.)
3. Use 24x24 for Dashicons. This is the easiest approach here in many ways, but it leads to unintended side effects for those Dashicons that don't have as much padding inside the box:

In the above screenshot, RSS, Search, and Tag all use Dashicons, all of which have significantly less padding inside the box, in spite of being heavier:

Of these options, I suspect 2 (using a custom icon) is probably our best bet in terms of maintaining consistency across icons here, but I'd appreciate additional feedback if there's a better approach!

[mtias]

Closing per work on #20284