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.
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.
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>