How to render icon from icon picker

Help
1

In the frontend, how do I render icons selected from an icon picker in Directus? I know Directus uses Material Icons by default, and for social icons, it uses FontAwesome. How can I determine in the frontend when to use FontAwesome or Material Icons? Also, how do I actually render these icons in the frontend, especially in React? can someone give me an example.

Hi, late to the topic... but I just released a brand new extension that should solve your issue :) https://www.npmjs.com/package/simple-iconify-picker

 –

2 Answers

2
2

As far as I know there is no ready to use component to render for this use case.

There has been this nice but abandoned iconify icon picker extension but a quick test showed it’s not working anymore. Since iconify offers components for some mayor frameworks including react, it was quite easy to render those. You might want to look into the extension tho and see if you can fix it.

If you want to stay with the bultin icon picker, I think you have to roll your own logic to render them. It should not be too hard to distinct between material and fa icons as the font awesome ones are prefixed (or suffixed?) anyway.

Thanks a lot for the detailed explanation, really appreciate it! I was hoping Directus would have at least some official guide or example on how to handle this, but I guess not. I’ll check out the old iconify picker and see if I can patch it, otherwise I guess I’ll roll my own renderer based on the icon name prefix like you suggested.

 –
3

Replying here in case this helps others who find the thread later.

Directus uses Google Material Symbols for its icons.
You can render them by importing the Material Symbols stylesheet from Google’s CDN:

<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
  rel="stylesheet"
/>

Then you can use the icon like this:

<span className="material-symbols-outlined">{iconName}</span>