Allow font awesome icons in monitorables

[Karunamon]

This is a feature request to add support for Font Awesome (FA) icons for each monitor tile.

Rationale: Aesthetic and usability. On busy dashboards, it can be easier to pick out an icon rather than a block of text for the thing you want to focus on; this draws your eyes to the tile you want faster. Font awesome is suggested because it is free to use, open source friendly, has an extremely large variety of icons, and has packages for JavaScript development already.

Suggested Implementation details:

• An optional "icon" string value that can be added to any tile object in the JSON file. If this value is omitted, the default icon already used for the tile type is used instead (the inbuilt SVG). If the value is provided, use the icon of the matching font awesome class. For instance, the value fa-brands fa-docker given as the icon would result in a line of HTML like <font-awesome-icon icon="fa-brands fa-docker" /> in the tile' s Vue code, and show the docker logo in the corner of the tile.

• This can be implemented naïvely; it is not necessary to validate that the given icon value is a valid font awesome icon. If a bogus value is given, the icon will remain blank (having no icon may be useful in some cases).

• The font awesome free package would need to be distributed with the UI. This should not cause significant load on the client.

[Alex-D]

Great idea! :)

Should the icon replace the label or should it be better to make that label able to contain any icon where we want?

I was thinking about a :icon:fa-brands fa-docker: that can be transformed into a component that match, allowing us to introduce other icon sets in the future if we want, without breaking the previous ones.