Use OIcons within HTML element

Dear App Builders,

I would like to use the OIcons from the Styleguide within an HTML element.

When I use them like

"html": "<button><o-icon name='add'></o-icon>New Element</button>"

I do not see any icon displayed. Do I need to add the o-icon elements somehow? Is it a custom component? If so, what is its name?

Thank you!

1 Like

Hi Tanja,
We included the icons in the following way

<i style=\"font-family: onedata-icons; font-style:normal; font-size: 20px; cursor:pointer;\", title=\"Hilfe\">&#xE040</i>

To find out about the id of the icon, you can open the Elements Part of the Dev Console (F12) on the Styleguide and identify the icon you wish as shown in the screenshot

4 Likes

Hey @kai.geukes, I think you have a small error in your code which - if you allow - I may correct:

<i style="font-family: onedata-icons; font-style:normal; font-size: 20px; cursor:pointer;" title="Hilfe">&#xE040

It’s the β€œ,” after cursor:pointer;\", inline-styling does not need to be separated via β€œ,” :slight_smile:

The other thing is just for reading it better: you can substitute \" with single quotation mark like title='Hilfe'.

1 Like