Display Hero Icon

I want to display an icon when a certain condition is met, using Hero Icons. I would like this ideally to be displayed as a small inline icon at the end of a line of text. Or alternatively as just a small text size icon. I’ve figured out the logic for when the icon will or won’t appear.

However I can’t seem to properly display the contents of a Hero Icon field. In most cases it simply displays the URL of the icon. Or if I use the image component I get an image but my choices there seem to be “absurdly gigantic” or “slightly less absurdly gigantic”.
Is it possible to append a hero icon to text using, for example, a template column and have the icon display as an icon as it does in the data view? If not is there some other way to accomplish this task? I wish the icons available on buttons and actions rows were available for this purpose…

Hero Icons are images unlike Emoji which are text. You can’t put an image in something that only holds text. My suggestion would be to use emoji or may use an Action Row component or maybe a ‘New Table’ component depending on if you are trying to show data from a single row on a detail screen or show multiple rows of data.

2 Likes

Is there a way to display it as an image and scale it? The image component doesn’t do that well, as noted but is there another trick? I guess a related question is: what is the use case(s) for the Hero Icon field in glide?

Maybe something with rich text? Can you copy a sample URL of the hero icon you generated?

Hi @ThinhDinh Sorry for the delay. That was my thought. Here’s the URL.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
</svg>

I tired something like this:

<p style="display: inline;">This is my hat <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 inline">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
</svg></p>

But all I got was the text. The SVG did not display.

Has this worked for you?

<p style="display: inline;">This is my hat <span style="background: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'none\' viewBox=\'0 0 24 24\' stroke-width=\'1.5\' stroke=\'currentColor\' class=\'w-6 h-6\'%3E%3Cpath stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5\' /%3E%3C/svg%3E') no-repeat center center; width: 1.5em; height: 1.5em; display: inline-block; vertical-align: middle;"></span></p>

1 Like

The span tag was the secret! Thanks!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.