Add new "Icons" page for icons customisation and reuse across the admin interface

[allcaps]

Docs draft for #4821

[tomdyson]

Great docs @allcaps!

[zerolab]

It is unclear to me what 16x16 points means. Is it the viewbox?

[allcaps]

Yes. I added an example.

[zerolab]

Cheers @allcaps!
I feel this may prove tricky for non-SVG proficient developers who just want to use a FontAwesome icon (e.g. https://fontawesome.com/icons/clipboard-list has a viewbox of 0 0 384 512 (and I, for example don't have the tools to convert it to a 0 0 16 16 viewbox. Changing the value ends up with a blank icon)

[allcaps]

I'm not sure the same size matters that much as the final size is defined in CSS.
Maybe the ratio is significant. But I'm not sure about that too. I have to experiment.

[zerolab]

aside from this line which is confusing, the rest LGTM and ready to be merged on my opinion

[vsalvino]

I am experiencing the same issue. Trying to use fork-awesome icons which look like this:

<svg width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
  <path d="M1401 1547l-6 6c-75 ... " />
</svg>

Simply removing the width, height, and xmlns attributes and adding viewbox="0 0 16 16" does not scale it correctly. I'm not sure what kind of tools or attributes should be used to convert an existing SVG into a wagtail-flavored SVG.

[adsee42]

Hi, it's been a year, any progress on this?
Ability to adding more icons would be really helpful!

[zerolab]

Hey @adsee42,

The switch to SVG is mostly done. See #6107 for the full list and progress.

What would help get everything over the finish is line is submitting PRs for the remaining items, and reviewing/testing related pull requests such as this one.

[gasman]

One thing we've tended to miss when adding icons to Wagtail is ensuring that any necessary attribution is in place (which is a requirement for Font Awesome v5 - see #7377). It would be good if we could find somewhere in these docs to put a reminder of this.

This might be something that's better suited for a page in "Contributing to Wagtail" though - it looks like these docs are primarily aimed at people adding icons for their own purposes (including third-party packages).

[vsalvino]

Should add a note here that icon fonts cannot be used for icon attributes on Streamfield blocks (not sure if this also applies to other icon attributes defined in Python code)

[zerolab]

@allcaps this could use a rebase and I think it is high time we merge this in as menus, streamfields and quite a lot of UI components use the SVG icons now

[squash-labs]

Manage this branch in Squash

Test this branch here: https://allcapssvg-icon-docs-1a1e7.squash.io

[allcaps]

@zerolab Rebased!

I've included code snippets to give easy access to the available icon names and provide a example.

Should we drop the section about icon fonts?

[zerolab]

LGTM!

[lb-]

Just had another read - also looks great. Thanks @allcaps !

[lb-]

Does anyone know why we did not get this into 4.2? I'm happy to merge now but not sure if we were still waiting on something.

@zerolab / @allcaps

Maybe it's worth putting this in 4.2 stable if we do merge.

[zerolab]

@lb- uh-oh, I have failed to add to the 4.2 milestone, so it got lost in translation.

I don't see any reason not to, but pinging @gasman

[gasman]

@zerolab Go for it 👍

[thibaudcolas]

Merging now! I believe there is still work to be done on this to be honest, but we’re hoping to push for this to happen by the next release, and if this fails we can add a disclaimer.

I wouldn’t recommend us backporting this. The documented setup here isn’t compatible with all of our icons, which is part of the reason why #6107 is still only halfway through the list. We have two solid approaches to solving this mentioned in #7511 that should work without changes to how icons are registered, but they’re just ideas/prototypes at this stage.

[lb-]

Thanks Thibaud