[HTMX] Support an icon pack

[elfjes]

In order to show consistent icons through the application, we want to start using an icon pack. An initial list of requirements would be:

• A good free option
• versatile icons, many uses
• no npm requirement
• easy to self-host
• customizability?
• ability to optimize bundle? (without npm or involved build step)

For me, the go-to icon pack would be fontawesome. I have had good experiences with it in the past, but only in an npm setting. It also ticks the first 4/5 boxes of the requirements. However, we need to find out how well it works in a python/django setting, especially with regards to optimization. There is some good news though: Font Awesome has custom subsetting https://blog.fontawesome.com/introducing-subsetting-in-fa-kits/ so we can optimize our bundles. We need to figure out how hard it is to create custom bundles, especially since geant will need different icons than sikt as we will have our own pages that may have additional icons.

A final work flow might somewhat similar to how we approach tailwindcss:

• get a list of all required icons
  • apps will need to have some discoverability to indicate which items
• use this list to create a bundle
• commit this to the codebase (Argus or geant-argus respectively)
• do this as much as possible in an automated way, for example a management command

I'll try some things out

alternatives

• Use the fontawesomefree python package. This package includes every resource and is not optimized at all. It makes it easy to set up FA, but that's all that can be said in favour. However, if we cannot figure out a way how to optimize the bundle, we may as well make use of it
• There are other icon packs. We may want to figure out which work for us, an example list can be found here https://www.untitledui.com/blog/free-icon-sets

references

#1055
#1038

[elfjes]

I went through a number of notable entries in the above list, but found none that was suitable to our needs (either missing self-hosted options, customizability, optimizalbility), or in some cases I just didn't like the style (material, bootstrap).

Having a closer look at font-awesome, subsetting seems kind of difficult without a paid license and is hard to automate anyway. However, looking at the minimum required files, it doesnt' seem too bloated:

• css/fontawesome.min.css 73K
• css/regular.min.css 500B
• css/solid.min.css 572B
• webfonts/fa-regular-400.woff2 25K
• webfonts/fa-solid-900-woff2 154K

for a total of ~250KB, which can all be cached by the browser

I'd be fine with including that as-is, given that it simplifies things greatly