A flexible, easy-to-use icon picker for Tabler Icons.
Setup is straightforward:
- Add Tabler Icons to your project.
- Add EZ Icon Picker to your project.
- Initialize EZ Icon Picker.
Include the following links in your HTML file to load Tabler Icons and EZ Icon Picker:
<!-- Tabler Icons CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.21.0/tabler-icons.min.css" integrity="sha512-XrgoTBs7P5YtpkeKqKOKkruURsawIaRrhe8QrcWeMnFeyRZiOcRNjBAX+AQeXOvx9/9fSY32dVct1PccRoCICQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- EZ Icon Picker CSS -->
<link rel="stylesheet" href="/dist/ez-icon-picker.css">Add the following to load EZ Icon Picker:
<!-- EZ Icon Picker JavaScript -->
<script src="/dist/ez-icon-picker.min.js" type="module"></script>1.Add a div with a selector class, e.g., .icon-picker.
<div class="icon-picker" data-name="icon"></div>2.Initialize the picker by adding the following JavaScript:
<script>
document.addEventListener('DOMContentLoaded', () => {
new EzIconPicker({
selector: '.icon-picker'
});
});
</script>Here’s the complete HTML setup for the EZ Tabler Icon Picker:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Tabler Icons CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.21.0/tabler-icons.min.css" integrity="sha512-XrgoTBs7P5YtpkeKqKOKkruURsawIaRrhe8QrcWeMnFeyRZiOcRNjBAX+AQeXOvx9/9fSY32dVct1PccRoCICQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- EZ Icon Picker CSS -->
<link rel="stylesheet" href="/dist/ez-icon-picker.css">
<title>Tabler Icon Picker</title>
</head>
<body>
<!-- Icon Picker Element -->
<div class="icon-picker" data-name="icon" data-icon="ti ti-home"></div>
<!-- EZ Icon Picker JavaScript -->
<script src="/dist/ez-icon-picker.min.js" type="module"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
new EzIconPicker({
selector: '.icon-picker'
});
});
</script>
</body>
</html>data-name - Specifies the name of the input field, useful for form submissions.
data-icon - Allows pre-selecting an icon by specifying its class name
To create an icon picker with a default icon, use the following code:
<div class="icon-picker" data-name="icon" data-icon="ti ti-home"></div>