Using icon tags in RichText html

What I’m trying to do:
I’m using a RichText component that has a dinamically generated content using restricted_html. In a few places I would like to add an icon using the i tag and a fontawesome icon class, but it shows nothing.

What I’ve tried and what’s not working:
< i class=“fa-regular fa-circle-question”>

I know that instead of doing this I could create a slot and dinamically create and add a Label with the desired icon, but that seems like it will cost way to much more than using just plain html (if possible).

Have you inspected an icon element in browser dev tools? I suspect you’re following font awesome 6.x documentation and anvil loads fontawesome 4.7.

I have fontawesome 6.x installed in my native libraries, but I also tried using the old icons and still didn’t work.

Edit: I also just tried to create the slots dinamically and later add the Label into the slot and it didn’t really work too. All the labels where added to the end of the Rich Text. Is it possible to set the Rich Text content as a string that has slots defined as names between {} and then later add componentes to the rich text mencioning those slots? Or the slots must be defined in Design mode?

What’s the aim? There might be a better way.

(The restricted html is probably nuking the class).

Context:


At the start of the app, the user will receive an alert containing the last changes in the app since their last visit. Those changes can be either a new UI, a bug fix or a new feature to existing UI. The idea is that I want to show an appropriate icon before the name of the feature in the Changelog.
A few of those features could also have a new tutorial that will trigger when the user enters the page. I want to show another specifc icon after the name of the feature to inform that the feature have a tutorial of how to use it.

What I want
The text in the alert is completely automatically generated using html in a rich_text. I want o replace those “[t]” that I circled with a specific icon and add other icons in those places that I made a yellow square.

If the content of the rich text component is entirely provided by you (and not user supplied), then you don’t need the protection of the HTML restrictions the component provides. Instead you could use an HtmlTemplate and use any HTML you want in it.

Here’s an example of using HtmlTemplate and inserting arbitrary HTML in it: Anvil | Login

If any of the content is provided by other users, you don’t want this approach since it opens you to a host of security issues.

3 Likes

This worked perfectly! Thanks @jshaffstall !
I didn’t know about those HTMLTemplates.

1 Like