Use Font Awesome or Similar Icons

[JodieM]

I would love to expand the icon availability by using Font Awesome Icons.

https://fontawesome.com/docs/web/add-icons/how-to

There should be a field for icon class and the user will enter something like "fa-solid fa-magnifying-glass" to get the https://fontawesome.com/icons/magnifying-glass?s=solid&f=classic icon.

If an icon class is entered it should override the text choice on the Indicator. The background selected from the Salesforce Icons should still be shown (so if the Salesforce Icon is empty the FA Icon will be shown on its own).

We can limit this to the Free Font Awesome icons. Note we need to satisfy the attribution somewhere. Maybe it can be displayed on the Custom Property Editor when adding the component to the page.

These can be black icons by default (we don't really need to add colour as we want to try to ensure that we stick to Salesforce colours and not have admins making a colour explosion on the page).

[antonekom]

@JodieM @tschug I am interested in contributing to this issue. I have already forked the repo and made some changes locally to get FontAwesome icons semi-working in the LWCs. I have a couple of questions about the requirements above:

If an icon class is entered it should override the text choice on the Indicator

By "text choice" do you mean the Static Text field/property on the Indicator Item and/or "Card Text" on the Indicator Bundle cmdt?

The background selected from the Salesforce Icons should still be shown (so if the Salesforce Icon is empty the FA Icon will be shown on its own).

I'm not sure I understand this one - can you elaborate/clarify a bit?

If I understand the current functionality, it seems like the Icon Value overrides Static Text, and Image overrides the Icon Value. I'm assuming the Icon Class (for FontAwesome icons) should override the Icon Value (for SLDS Icons), and Image should override the FontAwesome icons - is that correct?

I have been able to get FontAwesome icons to appear in some cases, but I think I'll need to re-factor some of the LWCs because currently they are using Lightning Icon component which doesn't understand the FontAwesome class that is getting passed in.

I'd be happy to have a short call sometime to get more into the details, just let me know.

[tschug]

@antonekom - Thanks for taking interest and seeking to contribute.

My understanding of the lightning-avatar component that we're utilizing is that it takes these parameters and we have mapped the respective LWC properties or CMDT to them:

• alternative-text = CMDT: Hover Text
• fallback-icon-name = CMDT: Icon Value
• initials = CMDT: Static Text
• size = LWC Property: Icon Size
• src = CMDT: Image
• variant = LWC Property: Icon Shape
• class = Not currently used but we plan to utilize with #71

And that there is a sort of "layered" aspect to how the avatar is rendered.

The src is the top most layer, but if it is invalid then the initials are displayed. If this happens and there is also a fallback-icon-name then the SLDS Icon is basically a background color for the initials. And if there are no initials but there is a fallback-icon-name, then the image from the SLDS Icon and its respective color are displayed. The class can be used with customized styling hooks (see Customize Component Styling section).

All of this to say - I do not know how FontAwesome (FA) works and if it would be populating the src or if it would be using the class (maybe in combination with initials). A quick stand of the FA site gives this impression of using class but also with an HTML <i> tag.

If this is the case, then using the avatar LWC doesn't work and we'd likely need to build our own version of the HMTL for the avatar using the SLDS guide and we could choose to use both and conditionally render their a custom FA version or the avatar component.

---

Regarding your questions

---

If an icon class is entered it should override the text choice on the Indicator

By "text choice" do you mean the Static Text field/property on the Indicator Item and/or "Card Text" on the Indicator Bundle cmdt?

This would be for the CMDT: Static Text of the Indicator Item.

I think how it's written, it's assuming that class will be used to render FA.

And so it's saying that if someone entered initials (CMDT: Static Text) but also entered an FA class that the FA is shown and not the initials. This is also assuming that src is not used for FA or is invalid, thus causing the avatar component to try to render initials.

The background selected from the Salesforce Icons should still be shown (so if the Salesforce Icon is empty the FA Icon will be shown on its own).

I'm not sure I understand this one - can you elaborate/clarify a bit?

With the layering of the avatar component, where an SLDS Icon can be used to color the background of initials, the desired effect is to have FA layered over the SLDS Icon in order to provide background color to the FA icon.

[JodieM]

Just adding a link here to @antonekom excellent contribution https://github.com/antonekom/Salesforce-Indicators/tree/font-awesome

and my code and feature review of the current state https://www.loom.com/share/3a7e25abdbad424499202189f5a69eb0

Next steps are to:

• Solve or understand some of the technical challenges of the library - eg using CSS + JS
• Solve or understand some of the licencing implications of putting third party library in an OSC project - is it even allowed?
• Allow to do colored icons (see #71 also)
• Get it working on not just Extensions (easy fix)
• See if there is any way we can include code for people to use the Pro Plan if they want extra features (low priority)

[JodieM]

After doing more research Font Awesome is not the only way, there is Unicons or Material Symbols by Google, Line Awesome.

Ideally it would be something that can be customisable by the admin - eg uploading the static resource containing the SVGs, then having somewhere in a CMDT they can link to the CSS, then using the class field in the CMDT record for the icon.

The icons should able to be coloured by entering a css colour (hex code or name) on the CMDT Indicator Item record.

[JodieM]

There is also this, but it's a few years old and it needs updating if we were to make it work. https://ennoucas.medium.com/easier-way-to-work-with-salesforce-lightning-design-systems-icons-ba2726fcca1f