Custom Icons

Use the icons option to set own custom icons via Javascript or HTML for the placeholder icons. The icons need to be in HTML markup language or already as HTMLElement

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 = new betterNiceSelect.BetterNiceSelect("#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>'
    }
});