[DevTools] Larger panel buttons and center

[sebmarkbage]

The panel icons are quite small. Especially compared to the equivalent buttons elsewhere in Chrome DevTools that otherwise use the same icons. This makes them a little bigger to make them similar size to our other button icons.

They were also a bit off center. This centers them as well.

Before:

After:

[eps1lon]

The AI model I used told me 144 -816 672 672 is the viewbox that fits the path perfectly which I used in #34517.

The original viewbox was directly from the Material icons which didn't fit the path perfectly so it became off-center depending on the font size.

Did you check the alignment when increasing/decreasing base browser font size via settings?

[sebmarkbage]

Yea. Seems fine. The font size doesn't matter. Doesn't change. That's up to the button to align itself. If the button comes out of alignment then that's a different issue.

But I mean alignment of the rest of the row is messed up because things like the checkboxes should be buttons etc.

[eps1lon]

Yea. Seems fine. The font size doesn't matter. Doesn't change. That's up to the button to align itself. If the button comes out of alignment then that's a different issue.

Well, it does matter if the path is not centered in viewbox. But seems like it still is.

[sebmarkbage]

Yea I'm not sure where the 820 box came from because all the materialize design ones have a 960 height for the 24px versions which puts them center:

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:close:FILL@0;wght@400;GRAD@0;opsz@24&icon.size=24&icon.color=%231f1f1f

Then I just applied equal sizing to make it a little larger while still always fitting in our viewbox. Seems to work well for all of them.

Really it's weird that we use 24px basis icons and then resize them to 16px. We should probably use 16px basis icon to begin with or maybe use 24px icons everywhere without having to scale them and fix the padding of the buttons instead.