Using primereact icons in custom extensions

[Andraz_Repar]

Hi, I am trying to create a rather simple table view of linked records with some editing capabilities. As far as I managed to discover, the grid element is not available in the SDK, so am using using the Primereact library.

It is going pretty well overall, expect that I cannot get primeicons to be displayed. All I get is a square instead of the actual icon (similar to what is described here)

I am fairly new to React and frontend development, so perhaps my question will not make sense to everyone and I am not sure this is even supported, but I’ve seen that some people are using primereact with Airtable SDK, so I am thinking there must be a way to display these icons?

[Kamille_Parks]

I use the same library and was never able to get the icons to work. Curious to see if a solution is now possible due to the Blocks API permitting webpack config.

My interim solution was just to use CSS to replace all icons with SVG matching Airtable’s styling. Its just as annoying as it sounds.

[Andraz_Repar]

Ok, good to know it’s not just me then :slightly_smiling_face: Thanks for your suggestion, I was able to do what you suggest for regular buttons and stuff, but I am struggling with the default icons in other elements, like X in Dialog here:
[//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/airtable/original/3X/e/f/ef9518ea5f7511e3a68b37e0847713e921924de0.png]

Were you perhaps able to replace these as well? The same goes for the previous/next month icons in the calendar.

[Kamille_Parks]

I haven’t needed either of the specific examples you listed. I mostly use PrimeReact for dropdowns/multi-selects. The icons for those are easy to replace because they have CSS classes applied to them.

[Andraz_Repar]

Hi Kamille,

rather a long time, but I recently attempted to use dropdowns and selects and I am struggling to replace the icons. Do you by any chance have a simple working example of how you replaced the icons with SVG? I would be extremely grateful 🙂