Virtual list for Icon picker

This is not a very large feature request and I don’t think it should be too hard to implement:

It would be a nice improvement if the icon picker (of the original Icon element) used a virtual list instead of a normal grid. The icon picker works fine with a small number of icons, but when using larger icon sets (e.g. Font Awesome Pro with 4,000+ icons per set), the picker becomes unbearably slow. This is because every icon adds an HTML node to the grid, which quickly degrades browser performance.

If the icon grid used a virtual list, only the visible icons would be rendered in the DOM. When the user scrolls or searches for an icon, the virtual list swaps out nodes as needed. This would result in a huge performance improvement.

3 Likes

I second that Request. I have multiple websites with thousends of Icons and opening the Icon Library freezes the builder for multiple seconds. Since Bricks is Build with VueJs and it has a component for this, this should be easy to implement and would be a great improvement.

Best Regards
Suat

1 Like

Hi guys,
Could you possibly record a short screencast showing your page setup, your icon sets, and, if applicable, the freeze? I just added about 4,500 icons to a set, but I haven’t been able to trigger a freeze yet :thinking:

So I did record the issue using OBS on a Windows 11.
In the video the issue is way more prevalent in Chrome than Firefox but I use Firefox as my daily Browser and it’s normally worse than you can see here:

I’m on vacation for the next two weeks, but I’m happy to reply to any follow up questions after that.

Best regards
Suat