<!-- Html -->
<button id="my-button"></button>
// JavaScript (Bootstrap 5 & Bootstrap Icons)
// var bi = ["bi bi-123", "bi bi-0-circle", "bi bi-0-circle-fill", "bi bi-0-square", ...]
var output = document.getElementById('txtOutput1');
const ip = new IconPicker("my-button", bi, 20, {
iconButtonClass: 'btn btn-outline-secondary',
selectedIconButtonClass: 'btn btn-success',
inputClass: 'form-control',
navButtonClass: 'btn btn-primary',
arrowPrevIconClass: 'bi bi-chevron-left',
arrowNextIconClass: 'bi bi-chevron-right',
placement: 'bottom',
inputPlaceholder: 'Buscar...',
});
ip.onChange((parameters) => {
output.value = parameters.icon;
});
ip.mount();
<!-- Html -->
<div id="icons-div"></div>
// JavaScript (Bootstrap 5 & Bootstrap Icons)
// var bi = ["bi bi-123", "bi bi-0-circle", "bi bi-0-circle-fill", "bi bi-0-square", ...]
const options2 = {
iconButtonClass: 'btn btn-outline-secondary',
selectedIconButtonClass: 'btn btn-success',
inputClass: 'form-control',
navButtonClass: 'btn btn-primary',
arrowPrevIconClass: 'bi bi-chevron-left',
arrowNextIconClass: 'bi bi-chevron-right',
placement: 'bottom'
};
const ip2 = new IconPicker('icons-div', bi, 32, options2);
var output2 = document.getElementById('txtOutput2');
ip2.onChange((params) => {
output2.value = params.icon;
});
ip2.mount();