Add icon names to under dashicons so I can search using my browsers Ctrl + F function.

[dufresnesteven]

On ​https://developer.wordpress.org/resource/dashicons/, add a label under the icon so I don't need to find the filter input and search there.

My expectation is that I can just use CTRL + F and type in "comments" and my browser will find any associated icons and jump me to that section on the page.

Example: ​https://themes-pixeden.com/font-demos/7-stroke/

[dd32]

The page is pretty space constrained due to the number of icons being displayed, and the small size of them.

Some of the class names are fairly long too, for example dashicons-welcome-add-page and dashicons-buddicons-buddypress-logo

The Filter box allows you to search the dashicons though.

edit: I'll mention that I've had the same problem a number of times, and have resorted to view-source and scrolling through the icons and their CSS classnames in order to figure out what an icons name is

[dufresnesteven]

Yeah, the namespace does make it challenging.

A bit of research notes for discussion:

Dashicons: ​https://developer.wordpress.org/resource/dashicons/

• Emphasized Sections
• Icon Container ( 68x68 )
• 13 icons per line @ 961px ( this being our desktop breakpoint )

Material Design Page: ​https://material.io/resources/icons/?style=baseline

• De-emphasize section
• Icon container ( 96x104 )
• 10 icons per line @ 961px

7 stroke Page: ​https://themes-pixeden.com/font-demos/7-stroke/

• No sections
• Icon containers ( 86 x 86 )
• 11 icons per line @ 961px

Font Awesome: ​https://fontawesome.com/icons?from=io

• No sections
• Icon containers ( 134 X 64 )
• 7 icons per line @ 961px

Thoughts/Suggestions

• We appear to have smaller icon containers than the others. We could create more room for our longer classes by having less icons per line.
• Based on the other tools, we may not need to separate out the icons into sections for readability. They all seem to have not went that route (not sure if that's better or worse UX).

[dufresnesteven]

Here's a quick attempt at a larger item in the grid.

[dd32]

Thanks for the follow up @dufresnesteven!

I think if we were to drop the dashicons- prefix from the displayed text (I think it's pretty fair that you'd want to copy it from the above section) it'd look nicer.

I agree, that'd be a nice change that I didn't think would really be viable. I think it's worth trialing with the actual dashicon names and going from there :)

[dufresnesteven]

Adds the icon name under the icon.

[dufresnesteven]

Current Layout

[dufresnesteven]

Updated in Diff.

[ryelle]

There have been some icons added since the patch was created, so it doesn't apply cleanly anymore.

It would be nice for the label underneath to be human-friendly, like "WordPress", "WordPress (alt)" instead of wordpress, wordpress-alt. Also, the extra phrases in the div content (that were hidden) were also used for searching, so typing in "language" brings up the translation icon— we should keep that functionality.

[dufresnesteven]

Replying to ryelle:

Also, the extra phrases in the div content (that were hidden) were also used for searching, so typing in "language" brings up the translation icon— we should keep that functionality.

Yep, definitely. Missed that.