<!-- Button tag -->
<button class="btn btn-secondary" role="iconpicker"></button>
<!-- Div tag -->
<div role="iconpicker"></div>

<!-- Example 1 -->
<button class="btn btn-secondary" data-iconset="ionicon" data-icon="ion-ionic" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-secondary" data-iconset="fontawesome5" data-icon="fas fa-wifi" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-secondary" data-iconset="weathericon" data-icon="wi-day-rain" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-secondary" data-iconset="mapicon" data-icon="map-icon-walking" role="iconpicker"></button>
<!-- Example 5 -->
<button class="btn btn-secondary" data-iconset="octicon" data-icon="octicon-bug" role="iconpicker"></button>
<!-- Example 6 -->
<button class="btn btn-secondary" data-iconset="typicon" data-icon="typcn-anchor" role="iconpicker"></button>
<!-- Example 7 -->
<button class="btn btn-secondary" data-iconset="elusiveicon" data-icon="el-icon-female" role="iconpicker"></button>
<!-- Example 8 -->
<button class="btn btn-secondary" data-iconset="materialdesign" data-icon="zmdi-card-sd" role="iconpicker"></button>
<!-- Example 9 -->
<button class="btn btn-secondary" data-iconset="flagicon" data-icon="flag-icon-mx" role="iconpicker"></button>

<!-- Example 1 -->
<div data-search="true" data-search-text="Search..." role="iconpicker"></div>
<!-- Example 2 -->
<div data-search="false" role="iconpicker"></div>

<!-- Example 1 -->
<div data-label-header="{0} - {1} pages" data-label-footer="{0} - {1} of {2} icons" role="iconpicker"></div>
<!-- Example 2 -->
<div data-header="false" data-footer="false" role="iconpicker"></div>

<div data-rows="3" data-cols="6" role="iconpicker"></div>

<!-- Example 1 -->
<div data-align="left" role="iconpicker"></div>
<!-- Example 2 -->
<div data-align="center" role="iconpicker"></div>
<!-- Example 3 -->
<div data-align="right" role="iconpicker"></div>

<!-- Example 1 -->
<button class="btn btn-secondary" data-placement="left" data-icon="fas fa-arrow-left" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-secondary" data-placement="top" data-icon="fas fa-arrow-up" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-secondary" data-placement="bottom" data-icon="fas fa-arrow-down" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-secondary" data-placement="right" data-icon="fas fa-arrow-right" role="iconpicker"></button>

<div data-arrow-class="btn-success" data-arrow-prev-icon-class="fas fa-angle-left" data-arrow-next-icon-class="fas fa-angle-right" role="iconpicker"></div>

<div data-selected-class="btn-danger" data-unselected-class="btn-info" role="iconpicker"></div>

<!-- Example 1 -->
<button class="btn btn-default" data-icon="fab fa-jsfiddle" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-primary" data-icon="fab fa-facebook" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-secondary" data-icon="fab fa-github-alt" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-success" data-icon="fab fa-html5" role="iconpicker"></button>
<!-- Example 5 -->
<button class="btn btn-warning" data-icon="fab fa-stack-overflow" role="iconpicker"></button>
<!-- Example 6 -->
<button class="btn btn-danger" data-icon="fab fa-youtube" role="iconpicker"></button>
<!-- Example 7 -->
<button class="btn btn-info" data-icon="fab fa-twitter" role="iconpicker"></button>
<!-- Example 8 -->
<button class="btn btn-light" data-icon="fab fa-bluetooth" role="iconpicker"></button>
<!-- Example 9 -->
<button class="btn btn-dark" data-icon="fab fa-peace" role="iconpicker"></button>

<!-- Example 1 -->
<div class="input-group">
    <span class="input-group-prepend">
        <button class="btn btn-secondary" data-icon="fas fa-map-marker-alt" role="iconpicker"></button>
    </span>
    <input type="text" class="form-control" value="My marker">
</div>
<!-- Example 2 -->
<div class="input-group">
    <input type="text" class="form-control" value="My house">
    <span class="input-group-append">
        <button class="btn btn-outline-secondary" data-icon="fas fa-home" role="iconpicker"></button>
    </span>
</div>

// Default options
$('#target').iconpicker();

// Custom options
$('#target').iconpicker({
    align: 'center', // Only in div tag
    arrowClass: 'btn-danger',
    arrowPrevIconClass: 'fas fa-angle-left',
    arrowNextIconClass: 'fas fa-angle-right',
    cols: 10,
    footer: true,
    header: true,
    icon: 'fas fa-bomb',
    iconset: 'fontawesome5',
    labelHeader: '{0} of {1} pages',
    labelFooter: '{0} - {1} of {2} icons',
    placement: 'bottom', // Only in button tag
    rows: 5,
    search: true,
    searchText: 'Search',
    selectedClass: 'btn-success',
    unselectedClass: ''
});

$('#target').iconpicker()
            .iconpicker('setAlign', 'center') // Only in div tag
            .iconpicker('setArrowClass', 'btn-success')
            .iconpicker('setArrowPrevIconClass', 'fas fa-angle-left')
            .iconpicker('setArrowNextIconClass', 'fas fa-angle-right')
            .iconpicker('setCols', 9)
            .iconpicker('setFooter', true)
            .iconpicker('setHeader', true)
            .iconpicker('setIconset', {
                iconClass: 'fas',
                iconClassFix: 'fa-',
                icons: [
                    'fast-backward',
                    'step-backward',
                    'backward',
                    'play',
                    'pause',
                    'stop',
                    'forward',
                    'step-forward',
                    'fast-forward'
                ]
            })
            .iconpicker('setIcon', 'fa-pause')
            .iconpicker('setLabelHeader', '{0} of {1} pages')
            .iconpicker('setLabelFooter', '{0} - {1} of {2} icons')
            .iconpicker('setPlacement', 'bottom') // Only in button tag
            .iconpicker('setRows', 0)
            .iconpicker('setSearch', true)
            .iconpicker('setSearchText', 'Type text')
            .iconpicker('setSelectedClass', 'btn-danger')
            .iconpicker('setUnselectedClass', 'btn-primary');