Customizable Bootstrap Icon Picker With jQuery And Bootstrap 5

The popular Bootstrap 5 framework for creating custom web interfaces has a lot of nice perks to offer; however, one thing that's missed is the ability to easily choose the icon from among the huge catalogue of Bootstrap Icons, but now you can get that option with this new plugin.

This is a fully customizable jQuery that uses Bootstrap 5 popover component to create a filterable icon picker interface, which offers an easy way to select icons from over 1,600 Bootstrap SVG icons.

See It In Action:

How to use it:

1. Load the necessary jQuery library, Bootstrap 5 framework, and Bootstrap Icons in the document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap-icons.min.css" />

2. Download the plugin and load the following JavaScript & CSS files.

<link href="/dist/css/bootstrapicons-iconpicker.css" rel="stylesheet" />
<script src="/dist/js/bootstrapicon-iconpicker.js"></script>

3. Attach the Bootstrap Icon picker to an input field you specify.

<input type="text" class="form-control iconpicker" placeholder="Icon Picker" aria-label="Icone Picker" aria-describedby="basic-addon1" />

$(function(){
  $('.iconpicker').iconpicker();
});

4. While initializing an icon picker you can provide options to change its look and feel. All possible options:

$('.iconpicker').iconpicker({

  // Icon picker title
  title: false,

  // Selected icon on init
  selected: false,

  // Default icon
  defaultValue: false,

  // inline
  // topLeftCorner
  // topLeft
  // top (center)
  // topRight
  // topRightCorner
  // rightTop
  // right (center)
  // rightBottom
  // bottomRightCorner
  // bottomRight
  // bottom (center)
  // bottomLeft
  // bottomLeftCorner
  // leftBottom
  // left (center)
  // leftTop
  placement: "bottom",

  // Determine whether to re-position the icon picker
  collision: "none",

  // Enable animation
  animation: true,

  // Hide the icon picker on select
  hideOnSelect: false,

  // Show popover footer
  showFooter: false,

  // Place the search filed in the footer
  searchInFooter: false,

  // Pick the icon when click the accept button in the footer
  mustAccept: false,

  // CSS class for the selected icon
  selectedCustomClass: "bg-primary",

  // List of icon objects
  icons: [],

  // Custom class formatter
  fullClassFormatter: function (e) {
    return e;
  },

  // Input selector
  input: "input,.iconpicker-input",

  // Determine whether to use this the input as a search box
  inputSearch: false,

  // Append the icon picker to a specific element
  container: false,

  // Default selector
  component: ".input-group-addon,.iconpicker-component",

  // Customize the template here
  templates: {
    popover: '<div class="iconpicker-popover popover" role="tooltip"><div class="arrow"></div>' + '<div class="popover-title"></div><div class="popover-content"></div></div>',
    footer: '<div class="popover-footer"></div>',
    buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' + ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
    search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
    iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
    iconpickerItem: '<a role="button" href="javascript:;" class="iconpicker-item"><i></i></a>'
  }

});

---

This awesome jQuery plugin is developed by pixel-s-lab. For more Advanced Usages, please check the demo page or visit the official website.