Icon browser/picker in core

[stpaultim]

Description of the need

Now that we have an icon library in core, I've wanted to include them in some contrib modules I'm working on. It would be nice to have a nice simple icon browser/picker. We have an icon brower in contrib https://backdropcms.org/project/icon_browser, but it does not come with a picker.

@alanmels has introduced a nice icon picker in https://backdropcms.org/project/menu_icons

If I don't want to recreate an icon picker in each of my contrib projects, I'm currently left with a dependancy on "Menu Icons". We could add an icon picker to the "Icon Browser" module.

I don't know for sure that this belongs in core, but I think if it's not, we're going to get lots of contrib modules with their own solutions. I am anxious to hear what others think.

Proposed solution

I'm working on a proof of concept PR.

Alternatives that have been considered

1. Icon Browser - https://backdropcms.org/project/icon_browser
2. Menu Icons - https://backdropcms.org/project/menu_icons
3. Each contrib module ships with it's own icon picker

Additional information

Draft of feature description for Press Release (1 paragraph at most)

Backdrop now includes an API for an icon picker available to other core features and contrib projects. This icon picker allows a person to browse the icon library and pick a specific icon to insert into their field or website.

[stpaultim]

I have a PR, but closed it until I can do more work/review.

[olafgrabienski]

I don't know for sure that this belongs in core, but I think if it's not, we're going to get lots of contrib modules with their own solutions. I am anxious to hear what others think.

@stpaultim A page which allows to browse and pick icons in core would be a nice thing, e.g. to place icons in content. I also like the idea to make that browser available for contrib modules.

The Icon Browser module looks also like a good approach, and it could even be integrated into core. As you probably remember, it doesn't have a picker yet, but there is a feature request to "activate icons through the UI": backdrop-contrib/icon_browser#7.

[stpaultim]

@olafgrabienski - I'd be happy to use the Icon Browser module in core, but it would need to be modified somewhat. Currently, it's really an icon reference page. You click a link and you go to a distinct page where you can browse icons. It also provides useful information and help for anyone trying to implement that icon in css or code.

I believe that an icon picker probably needs to be a modal that pops up in the way that the media library does, allows you to browse the icons and pick one to be inserted into a field, and the modal/browser goes away until you need it again.

I'm not sure that the icon reference page provided by the Icon Browser is needed in core. So, it my opinion that means either 1) reworking the Icon Browser module to include or even focus on picker functionality that can be added to core OR 2) simply create a new icon picker and leave the Icon Browser as a slightly different kind of tool/resource.

@laryn - Do you have opinions on this?

[docwilmot]

In addition, I think there should be a "cheat sheet" page on BackdropCMS.org.

[izmeez]

In addition, I think there should be a "cheat sheet" page on BackdropCMS.org.

@docwilmot What kind of cheat sheet are you thinking of?

[stpaultim]

@docwilmot and @izmeez - I think that the Icon Browser is a good cheat sheet. So if we want that in core, then maybe we should add a picker to the Icon Browser module and put it in core. Then we have both.

If we decide to move forward.

[olafgrabienski]

In addition, I think there should be a "cheat sheet" page on BackdropCMS.org.

I think that the Icon Browser is a good cheat sheet.

A cheat sheet on backdropcms.org (or docs.backdropcms.org) is a good idea. The Icon Browser works also as a cheat sheet, but it's not publicly available.

[izmeez]

Ah, an Icon Cheat Sheet!

[docwilmot]

I believe that an icon picker probably needs to be a modal that pops up in the way that the media library does, allows you to browse the icons and pick one to be inserted into a field, and the modal/browser goes away until you need it again.

Do you mean something that pops up like the token browser, and on click inserts <img src="airplane.svg" /> into a field? Or a CKEditor button?

[stpaultim]

@docwilmot More like the former. I posted some screenshots above. Imagine an icon field with a "Browse Icons" button available (UI and labels may need some work). Clicking on button opens a modal with a browser, where you select an icon to insert into your field.

I did not think of the CKEditor use case. I was thinking about a tool for site architects and contrib module developers. A CKEditor button would be useful to people using the site.

I think that the former is more important for core, but that later would also be nice. Could be two different issues or just one.

[alanmels]

Hello, it's easier to understand what @stpaultim means if you give https://backdropcms.org/project/menu_icons a try. We had to implement icon picker exactly because the core was lacking this feature. The screenshot is taken from https://backdropcms.org/project/menu_icons

[docwilmot]

Apart from inserting into content (textarea) is there anywhere else that it would be useful to browse and insert icons? I'm thinking about a general UI for this. For CKEditor fields a custom CKE button sounds reasonable, but for other areas, either fields or formAPI, this might require a link adjacent to the field just like the token browser.
In addition to this, we could also do a cheat sheet on the admin bar somewhere.

[stpaultim]

Here are a few of the use cases for picking icons:

1. Allowing site editors to pick an icon to use as the site logo.
2. Picking icons for menus.
3. Picking icons for tabs
4. Picking icons for each users avatar
5. Picking icons for use in body field
6. Picking icons to add to taxonomy terms
7. Adding an icon to node titles.
8. Picking an icon to include in a button
9. Adding icons to status messages
10. Picking icons for specific fields, especially fields like contact information (phone, email, address, and social
11. And more......