This package has been deprecated in favor of better-nice-select. Please consider migrating to better-nice-select for continued support and updates: https://www.npmjs.com/package/better-nice-select

Custom Icons

Use the icons option to set own custom icons via Javascript for the placeholder icons. The icons need to be in HTML markup language and you do not need to set values for all icons - only for them you want to override.

Possible options to search for are: Banana, Apple, Orange, Lemon, Pepper, Mushrooms, Cabbages, Celery, Brocoli, Garlic

<div class="container">
    <select multiple="multiple" id="custom-icons">
        <option value="Banana">Banana</option>
        <option value="Apple">Apple</option>
        <option value="Orange">Orange</option>
        <option value="Lemon" selected="selected">Lemon</option>
        <option value="Pepper">Pepper</option>
        <option value="Mushrooms">Mushrooms</option>
        <option value="Cabbages">Cabbages</option>
        <option value="Celery">Celery</option>
        <option value="Garlic">Garlic</option>
        <option value="Brocoli">Brocoli</option>
    </select>
</div>

let select = bootstrapNiceSelect.BootstrapNiceSelect("#custom-icons", {
    icons: {
        add: '<i class="material-icons">add</i>',
        search: '<i class="fa-solid fa-magnifying-glass"></i>',
        tag: '<i class="fa-solid fa-circle-exclamation"></i>',
        delete: '<i class="bi bi-trash"></i>'
    }
});