Move all the icons to CSS backgrounds

Moving to minor since it won't be necessary for testing purposes.

Working on this now

Hey @ckrina, do you mind doing a quick review of my work? I'm wondering if you're ok with the mask-image approach I took for hover color changes or if you'd prefer to have multiple color versions of the icons, or if there's another option entirely!

@claireristow nice work!

About the mas itself, I personally think it’s a really good modern strategy to avoid what core is currently doing by storing the same icon in several colors. This is assuming all icons will be monochromatich, which I’d say it’s a safe assumption. It is also good because it’ll let us play with accent colors in the future letting us customize the admin UI colors. So unless anybody else has more insights I don’t oversee any problem with this,

The only thing I'd change here is that I would use a BEM pattern to name icons, and use each icon name as a modifier. From navigation-icon-media I’d convert it to navigation-link—media.

You can see an example in action-link.pcss.css.

ckrina → credited mherchel → .

Make sure if the SVGs are inlined into the CSS, you abstract them to a CSS variable (so the long SVG doesn't get output twice). Also keep in mind you'll pretty much always want to use them in pseudo-classes because the mask covers up everything else.

This is @mherchel feedback in Slack :)

Thanks for the feedback @ckrina and @mherchel, I'll work on those changes!

Merged updates to BEM-style classes and setup CSS variables for icons!

Automatically closed - issue fixed for 2 weeks with no activity.