Icon Request: Visually balanced chevrons

[joezappie]

One thing I often want to do is put a chevron inside a fully rounded container. The issue with it is its visually imbalanced.

This also becomes an issue when wanting to apply a CSS rotation transition to it, such as using it for a dropdown as it rotates more around the tip of the arrow rather than the center of mass, which looks odd.

The chevron used inside the expand_* symbol looks centered within the circle because it has shorter "tails" despite the tip being in the same location.

Would be nice to have some visually centered arrows in the library. There's currently keyboard_arrow_left chevron_left and chevron_backwards which all use the same SVG. Maybe one of those should become visually a centered variant.

What seems to be best is the keyboard_up rotated 90 as it renders 1px more towards the center:

I have to imagine this is a pretty common design.

TLDR: Visually balanced chevrons please!

[tphinney]

Ugh. So on checking, I find that /chevron_left looks to be perfect in this regard (hurrah!), but /chevron_right mirrors the icon while keeping the same left/right position, which is... well, let me just say this is <start_euphemism> “not ideal” <end_euphemism>.

The problem seems to apply also to some other icons that are clones of that one, as well (e.g. /chevron_forward /keyboard_arrow_right etc.).

[joezappie]

Glad its not just me! Its amazing what one or two pixels can do. I do see that the chevron_left is better, like keyboard_up.

Ideally, I think the center of the arrows should be on the inside of the corners stroke, allowing it to rotate from the center of mass.

Heres an example where I moved every icon at its base size 1px towards the center (even left and up strangely). Visually looks much more appealing.

The keyboard variants could remain the same since on a keyboard they are typically not centered?

Heres a fiddle with all the chevron like icons and a hover state which rotates them.
https://jsfiddle.net/ascendjoe/s9pq435u/13/

[tphinney]

Just writing down the measurement details for the record.

Currently, /chevron_left (and its lookalikes) has a left sidebearing of 320 units and a right of 344. That is 8 pixels left, and 8 3/5 right.

/chevron_right instead of being a full mirror, mirrors the glyph content, but maintains the same left and right sidebearings.