How do I add a svg icon before text

Elements How do I…
1

Hi, I’m creating a price list, and want to add icons on the left of text, such as green ticks, shields etc.

I can’t work out how to do this, as when I try to drop an svg icon to the left of text, it goes into a new column etc.

Is there a component that makes this easier..?

Loving elements btw! 1st day playing around with it today :slight_smile:

2

Hi @SteveG

I would do such a list with FLEX components and put the SVG and the TEXT component in it. Like so:
image

Then go to the setting of the Flex and set it to Row instead of column. Now your text is on the side of the SVG

image
image308×174 8.13 KB

If you the want to have a list of Text and SVGs you need to put the FLEXES in a CONTAINER or a FLEX. Like here:

image
image389×358 10.5 KB

My example looks like below:

image
image336×234 5.33 KB

There is a wrapping CONTAINER then a Header and then my list of FLEX with SVG and text.

Hope that helps

2 Likes
3

Thanks for taking the time to explain.
I can see from looking at your themes, that you’re a bit of a legend at this!

2 Likes