Make rustdoc icons more consistent

[jsha]

Here's a sample of some icons used in rustdoc:

Here are some used in docs.rs:

Here are some used on crates.io:

We should make the rustdoc icons internally consistent, and ideally consistent with related Rust sites as well. It looks like both docs.rs and crates.io are using SVGs from fontawesome's free set: https://github.com/rust-lang/docs.rs/tree/master/crates/font-awesome-as-a-crate/fontawesome-free-5.14.0-web/svgs/regular.

[inquisitivecrystal]

At a glance, it looks to me like fontawesome's free set has alternatives for all of the sample icons!

[pitaj]

@rustbot claim

[pitaj]

Here are my planned replacements:

brush.svg -> solid/paint-brush.svg

wheel.svg -> solid/cog.svg

unicode ⓘ -> solid/info-circle.svg

clipboard.svg -> solid/copy.svg

emoji 🔬 -> solid/microscope.svg

emoji 👎 -> solid/thumbs-down.svg

unicode ⚠ -> solid/exclamation-triangle.svg

down-arrow.svg -> solid/chevron-down.svg

toggle-minus.svg -> solid/minus-square.svg

toggle-plus.svg -> solid/plus-square.svg

I kept with the solid theme throughout, as that appears to be what docs.rs uses.

[pitaj]

Some alternatives:

"experimental" microscope: flask

"hide" toggle-minus: regular/minus-square

"expand" toggle-plus: regular/plus-square

Or we can choose to not change the hide/expand toggle.

[jsha]

Thanks for putting these proposals together!

clipboard.svg -> solid/copy.svg

The clipboard icon we have is actually copied from docs.rs' choice already. See e.g. https://docs.rs/crate/rustls/latest. We should keep the clipboard icon the same.

cog, brush, info circle, warning triangle all look great. For "experimental" I like the flask better than the microscope (and the flask is also used on MDN, a very well-respected documentation site).

Let's not change the hide/expand toggle just yet. That's such a big part of the UI it deserves separate consideration.

I also started a Zulip thread to get feedback from the rustdoc team.

[camelid]

Hmm, for the microscope and the thumbs-down, I kind of like that they're currently colorful. The proposed icons for those are a little intense IMO. I also agree that we should use a flask instead of a microscope if we're changing the icon.

[pitaj]

@camelid what do you mean when you say that the proposed thumbs-down icon is intense? I generally think of colorful things as more intense.

[pitaj]

My current plan (which I intend to execute on today) is this:

brush.svg -> solid/paint-brush.svg

wheel.svg -> solid/cog.svg

unicode ⓘ -> solid/info-circle.svg

emoji 🔬 -> solid/flask.svg

emoji 👎 -> solid/thumbs-down.svg

unicode ⚠ -> solid/exclamation-triangle.svg

down-arrow.svg -> solid/chevron-down.svg

And I plan on pulling in font-awesome-as-a-crate to provide the icons. This is what docs.rs does, so this will keep us up-to-date with them.

[camelid]

@camelid what do you mean when you say that the proposed thumbs-down icon is intense? I generally think of colorful things as more intense.

The proposed icon is a solid color, whereas the existing one has gradients. But I'm fine with trying the new one; we can always tweak it later.

[aycippo]

pinging this to see if it should be closed, or still has relevance.

[Aditya-PS-05]

@camelid, can you assign me this issue?

[chenyukang]

@camelid, can you assign me this issue?

This issue is now unreleased, you can claim it if you want.

[ExquisitePenguin]

I will open a pr soon

@rustbot claim