[UX] For the icon browser, show more icons per page

[swampopus]

Description of the need

The default core icon browser has 28 pages of icons, showing 110 icons per page. If you just want to browse, this takes a long time.

Proposed solution

Have a "rememberable" option for how many to display per page: 100, 200, 300, etc.

Alternatives that have been considered

Hard-code the list to 200 (or some other number) per page.

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

Backdrop now displays more icons per page in the icon browser.

[swampopus]

Okay-- so in doing some digging, it looks like there's already a system.core setting called "icon_browser_icons_per_page" which is hard-coded to 110. I don't see any way to change this.

This seems like this can be accomplished by adding a "how many to show per page?" field on the Icon Browser form itself, and then when you save, it just writes that value using the config_set() function.

If others think this is a reasonable idea, I will submit a PR.

EDIT: Another option would be to give the Icon Browser its own settings form, and this setting would go there. It would be a little lonely for the time being though, as I can't think of other settings which would go there.

[indigoxela]

@swampopus you seem to be very interested in things around the new icon browser. In its current state it is only the first step.

Here's a meta issue to add more: #7116
In addition, there are several existing contrib modules, that would benefit from an icon browser dialog.

But first of all: what's your use-case? Which topic(s) of the lengthy wish list in the meta issue are you most interested in?

[swampopus]

Hey @indigoxela,
I did see that meta issue before posting, but my particular use case wasn't in the list.

I am working on a SaaS project right now, and was looking for a simple "House" icon for a dashboard page. Normally I would use font awesome or box icons, and just use <i class='bx bx-house'></i> or what-have-you, but then I remembered that Backdrop had the Phosphor icon set built-in, so I went to check it out.

It honestly took me a while to realize what I needed to do to programmatically add an icon to the screen I was building. I knew they were svg, but I was hoping there was also a font-based method (like font awesome and box icons) for simplicity.

In my code, I do things like this:

$html .= "<i class='fa fa-gear'></i> Configure settings";

for a really simple example. Once I found the icon() function, it took me another bit of time to figure out what I needed to do to make it automatically resize with the container's font (so I could enlarge or shrink everything as appropriate for a responsive page). FYI-- it's adding width: 1em; to .container .icon for whatever the container is named.

Anyway-- so in trying to get an icon to appear on my screen, it sent me down this rabbit hole :).

I think most of the items (currently) on the meta issue are about things for end users to point and click on, but for me, I was looking to make my life easier in writing the HTML directly in my code.

BTW, I thought about a separate ticket, but it would be nice if there was a font-based way to add these icons. But I figured I had made enough tickets on the subject for the time being.

So for example, maybe something like:

backdrop_add_icon_css();
$html = "I can now add an <i class='ph ph-alien'></i> icon.";

It's possible that if that existed, some of the items on the meta issue might be easier to implement, especially the ability to insert icons into content editors or node titles, etc.

[indigoxela]

I was looking to make my life easier in writing the HTML directly in my code.

So if you need markup:

$icon = icon('house', array('attributes' => array('width' => 42, 'height' => 42)));
$html = "I can now add a $icon icon.";

Or if you prefer to use it as CSS var:

// Somewhere in your PHP code that loads on that page.
backdrop_add_icons(array('house'));

and then in your CSS use the var:

.my-element::before {
  content: "";
  display: inline-block;
  width: 2em;
  height: 2em;
  background-image: var(--icon-house);
}

The link to documentation: https://docs.backdropcms.org/documentation/icon-api

And, BTW, there's a font_awesome module in contrib. https://github.com/backdrop-contrib/font_awesome/

[indigoxela]

Re the initial request - show more (or less) icons on the browser page.

Currently there's no admin UI for that, but the config item exists (you found it). For now you can "hack" it in directly by editing json or running config_set() in code (or devel).

[swampopus]

Yes, I know. It's just a lot of typing for my old fingers :)

I did eventually figure it all out and got it working. But that is why in one of my other tickets (#7147), I suggested having this kind of information available from within Backdrop. I had to spend some time googling to find the documentation page.

Also-- while this definitely would work:

$icon = icon('house', array('attributes' => array('width' => 42, 'height' => 42)));
$html = "I can now add a $icon icon.";

it wouldn't scale (I think) if, say, I had a media query later on for smaller screens, and wanted to do something like:

@media screen and (max-width: 460px) {
  .container .whatever {
     font-size: 0.8em;
  }
}

[indigoxela]

... it wouldn't scale (I think)

Of course, you can always override SVG dimensions in CSS. SVG scale losslessly to any size. Width and height can always be overridden in CSS.

If you want to limit media queries to specific icons, add a class to them.

$icon = icon('house', array('attributes' => array('class' => array('superspecial-class'))));

And do your width/height CSS magic with that class.

[swampopus]

Yeah, that's pretty much what I ended up doing. Except I didn't add a class to the icon, I just used the regular .icon class which is automatically added.

All those nested array()s give me the willies. I hate using them on l() for the same reason, lol

[indigoxela]

All those nested array()s give me the willies...

I know exactly what you mean. But that can be more readable:

  $options = array(
    'attributes' => array(
      'class' => array(
        'my-super-class',
      ),
    ),
  );
  $icon = icon('house', $options);

Just takes more lines 😉