Update the replace media icon with a pixel-perfect version

[kjellr]

The "Replace" icon added in #14142 looks a little blurry on non-retina screens. Didn't catch this at first, but I'm seeing it today.

This PR replaces it with a more pixel perfect version, but I want to better understand why it's pixellated in the first place. Our icons are usually 24px square, so I originally made the icon at that size. But looking into the other toolbar icons, it appears those are 20px square, with 5px padding on the top and bottom. In this PR, I re-drew the SVG for that, and it fixed the problem. Is this the right approach?

cc @jasmussen for your icon expertise.

---

Before

Zoomed in 3x:

After

Zoomed in 3x:

[jasmussen]

Thank you for this. The icons must not be blurry ever, and this is a righteous fight!

So the current blur is because it's a 24px icon that's being scaled down to 20px.

We're sort of between two chairs on this one. 24x24px is the icon grid for Material icons, which are used in the block library and switcher. 20x20 is the icon grid for Dashicons, which are used elsewhere in the editor.

This split, and an effort to make it easier both for us and for third party developers to adopt and use great icons, is being discussed in a few places, including here. Which is to say — very long term I could see us moving towards a unified 24x24px grid for all icons in WordPress (optionally with 75% size 18px icons for the odds and ends).

The larger grid affords more pixels, therefore better legibility and implicitly accessibility.

So on the one hand, I would not oppose us moving this 24px icon to 20px to be sharp and crisp. On the other hand, I would love to see us move all icons to 24px, and the rules that scale them down to 20px in the long term. So if we do replace this, we'll want to replace it again if and when those efforts take hold.

What do you think?

[kjellr]

So on the one hand, I would not oppose us moving this 24px icon to 20px to be sharp and crisp. On the other hand, I would love to see us move all icons to 24px, and the rules that scale them down to 20px in the long term. So if we do replace this, we'll want to replace it again if and when those efforts take hold.

What do you think?

Thank you for clarifying! Yeah, I think we should just use a 20px icon for this one for now. When we do make the jump to 24px icons everywhere, we've already got a 24px version of this all ready to go. 👍

[jasmussen]

Let's remember to revisit this one, among all the others, if and when we move to a larger grid.

[mapk]

I love the conversation about moving to 24px icons. Until we do the solution here works.
LGTM!

[kjellr]

Thanks, all!