I have a webapplication where a User can add a new category. The category is beeing inserted to database with form post.

This category should have an icon (bootstrap icons https://icons.getbootstrap.com/) which the User should be able to select.

I use the bootstrap framework 5.1.3 for development.

I can not find a userfriendly possibillity for selecting an item out of 1500.

I have checked using a select element with options in the form. The problem here is that the user only would be able to see the name of the icon but not the image of the icon. Bootstrap does not support adding a image to the options.

Does anyone have an idea how to implement a userfriendly possibillity to choose an icon from a large iconset where the user is able to see the icon before selecting it?

It should be able to save the name of the selected icon in database.

It would be nice if anyone could help me :).

Many thanks to all :)

CodePudding user response：

I suppose you could show a modal with icons rendered with their names and adding onClick property to get the icon which is being selected by the user. You can also add a search box at top to filter icons by text. Kind of this: https://react-icons.github.io/react-icons/icons?name=bs