Bootstrap-Iconpicker By Victor Valencia Rico.

Iconpicker
A simple iconpicker for Bootstrap 3.x

Configuration.

1.- Add the style files: bootstrap.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-glyphicon.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Glyphicon -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-glyphicon.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, ionicons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Ionicons -->
<link rel="stylesheet" href="icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-ionicon-1.5.2.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Ionicons -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-ionicon-1.5.2.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, font-awesome.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Font Awesome -->
<link rel="stylesheet" href="icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-fontawesome-4.2.0.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Font Awesome -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.2.0.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

Font Awesome iconset availables are:

iconset-fontawesome-4.2.0.min.js
iconset-fontawesome-4.1.0.min.js
iconset-fontawesome-4.0.0.min.js

1.- Add the style files: bootstrap.min.css, weather-icons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Weather Icons -->
<link rel="stylesheet" href="icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-weathericon-1.2.0.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Weather Icons -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-weathericon-1.2.0.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, map-icons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Map Icons -->
<link rel="stylesheet" href="icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-mapicon-2.1.0.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Map Icons -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-mapicon-2.1.0.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, octicons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Octicons -->
<link rel="stylesheet" href="icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-octicon-2.1.2.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Octicons -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-octicon-2.1.2.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, typicons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Typicons -->
<link rel="stylesheet" href="icon-fonts/typicon-2.0.6/css/typicons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-typicon-2.0.6.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Typicons -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-typicon-2.0.6.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, elusive-icons.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Elusive Icons -->
<link rel="stylesheet" href="icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-elusiveicon-2.0.0.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Elusive Icons -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-elusiveicon-2.0.0.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

1.- Add the style files: bootstrap.min.css, material-design-iconic-font.min.css and bootstrap-iconpicker.min.css

                            <!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap-3.2.0/css/bootstrap.min.css"/>
<!-- Elusive Icons -->
<link rel="stylesheet" href="icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<!-- Bootstrap-Iconpicker -->
<link rel="stylesheet" href="bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

                        

2.- Add the javascript files: jquery-1.10.2.min.js, bootstrap.min.js, iconset-materialdesign-1.1.1.min.js and bootstrap-iconpicker.min.js

                            <!-- jQuery -->
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
<!-- Bootstrap-Iconpicker Iconset for Material Design -->
<script type="text/javascript" src="bootstrap-iconpicker/js/iconset/iconset-materialdesign-1.1.1.min.js"></script>
<!-- Bootstrap-Iconpicker -->
<script type="text/javascript" src="bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>

                        

Via data attributes.

Initialize.

Add role="iconpicker" to initialize the iconpicker.

button
role="iconpicker"

div
role="iconpicker"

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

Use iconpicker in a form

Just add attribute name="" in button tag or div tag.

Set Iconset and Icon Selected.

Add data-iconset="glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon" to idicates the iconset. Default: data-iconset="glyphicon"

Add data-icon="" to select an icon. Default: data-icon=""

data-iconset="glyphicon"
data-icon="glyphicon-camera"

data-iconset="ionicon"
data-icon="ion-ionic"

data-iconset="fontawesome"
data-icon="fa-wifi"

data-iconset="weathericon"
data-icon="wi-day-rain"

data-iconset="mapicon"
data-icon="map-icon-walking"

data-iconset="octicon"
data-icon="octicon-bug"

data-iconset="typicon"
data-icon="typcn-anchor"

data-iconset="elusiveicon"
data-icon="el-icon-female"

data-iconset="materialdesign"
data-icon="md-sd-storage"

                    <!-- Example 1 -->
<button class="btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-default" data-iconset="ionicon" data-icon="ion-ionic" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-default" data-iconset="fontawesome" data-icon="fa-wifi" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-default" data-iconset="weathericon" data-icon="wi-day-rain" role="iconpicker"></button>
<!-- Example 5 -->
<button class="btn btn-default" data-iconset="mapicon" data-icon="map-icon-walking" role="iconpicker"></button>
<!-- Example 6 -->
<button class="btn btn-default" data-iconset="octicon" data-icon="octicon-bug" role="iconpicker"></button>
<!-- Example 7 -->
<button class="btn btn-default" data-iconset="typicon" data-icon="typcn-anchor" role="iconpicker"></button>
<!-- Example 8 -->
<button class="btn btn-default" data-iconset="elusiveicon" data-icon="el-icon-female" role="iconpicker"></button>
<!-- Example 9 -->
<button class="btn btn-default" data-iconset="materialdesign" data-icon="md-sd-storage" role="iconpicker"></button>

                

Iconset file

Should review the configuration for each iconset.

Set Search Input.

Add data-search="true|false" to show or hide the search field. Default: data-search="true"

Add data-search-text="" to indicate initial search text. Default: data-search-text="Search icon"

data-search="true"
data-search-text="Search..."

data-search="false"

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

                

Set Labels.

Add data-header="true|false" to show or hide the header. Default: data-header="true"

Add data-label-header="" to indicate header text. Default: data-label-header="{0} / {1}"

Add data-footer="true|false" to show or hide the footer. Default: data-footer="true"

Add data-label-footer="" to indicate footer text. Default: data-label-footer="{0} - {1} of {2}"

data-label-header="{0} - {1} pages"
data-label-footer="{0} - {1} of {2} icons"

data-header="false"
data-footer="false"

                    <!-- 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>

                

Set Rows and Columns.

Add data-rows="" to indicates the rows to showing in iconpicker. Default: data-rows="4"

Add data-cols="" to indicates the columns to showing in iconpicker. Default: data-cols="4"

data-rows="3"
data-cols="6"

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

Set Align. (Only in div tag)

Add data-align="left|center|right" to indicate the align. Default: data-align="center"

data-align="left"

data-align="center"

data-align="right"

                    <!-- 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>

                

Set Placement. (Only in button tag)

Add data-placement="left|top|bottom|right" to indicate where the iconpicker will be display. Default: data-placement="bottom"

data-placement="left"

data-placement="top"

data-placement="bottom"

data-placement="right"

                    <!-- Example 1 -->
<button class="btn btn-default" data-placement="left" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-default" data-placement="top" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-default" data-placement="bottom" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-default" data-placement="right" role="iconpicker"></button>

                

Set Style Navigations Buttons.

Add data-arrow-class="" to indicate the class of the arrows. Default: data-arrow-class="btn-primary"

Add data-arrow-prev-icon-class="" to indicates the class icon previous arrow. Default: data-arrow-prev-icon-class="glyphicon glyphicon-arrow-left"

Add data-arrow-next-icon-class="" to indicates the class icon next arrow. Default: data-arrow-next-icon-class="glyphicon glyphicon-arrow-right"

data-arrow-class="btn-success"
data-arrow-prev-icon-class="glyphicon glyphicon-chevron-left"
data-arrow-next-icon-class="glyphicon glyphicon-chevron-right"

                    <div data-arrow-class="btn-success" data-arrow-prev-icon-class=="glyphicon glyphicon-chevron-left" data-arrow-next-icon-class="glyphicon glyphicon-chevron-right" role="iconpicker"></div>
                

Set Style Icons Buttons.

Add data-selected-class="" to indicate the class of the selected icon. Default: data-selected-class="btn-warning"

Add data-unselected-class="" to indicate unselected icons. Default: data-unselected-class="btn-default"

data-selected-class="btn-danger"
data-unselected-class="btn-info"

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

Button Style.

Add in class="" your custom style.

class="btn btn-default"

class="btn btn-primary"

class="btn btn-success"

class="btn btn-warning"

class="btn btn-danger"

class="btn btn-info"

                    <!-- Example 1 -->
<button class="btn btn-default" role="iconpicker"></button>
<!-- Example 2 -->
<button class="btn btn-primary" role="iconpicker"></button>
<!-- Example 3 -->
<button class="btn btn-success" role="iconpicker"></button>
<!-- Example 4 -->
<button class="btn btn-warning" role="iconpicker"></button>
<!-- Example 5 -->
<button class="btn btn-danger" role="iconpicker"></button>
<!-- Example 6 -->
<button class="btn btn-info" role="iconpicker"></button>

                

Button addons.

You can include it in a class="input-group".

                    <!-- Example 1 -->
<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" data-icon="glyphicon-map-marker" 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-btn">
        <button class="btn btn-default" data-icon="glyphicon-home" role="iconpicker"></button>
    </span>    
</div>

                

Via JavaScript

Initialize.

.iconpicker(options) Initializes an iconpicker with options.

Options.

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-align="".

Name Type Default Description
align String 'center' (Only in div tag) Align of the iconpicker.
arrowClass String 'btn-primary' Class of the arrows.
arrowPrevIconClass String 'glyphicon glyphicon-arrow-left' Icon class of the previous arrow.
arrowNextIconClass String 'glyphicon glyphicon-arrow-right' Icon class of the next arrow.
cols Integer 4 Number of columns to display in the iconpicker. Min value is: 4
footer Boolean true Indicates whether to show or hide the footer. true|false
header Boolean true Indicates whether to show or hide the header. true|false
icon String '' Selected icon.
iconset String | Object 'glyphicon' Selected iconset. glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon
Object structure is:
{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }
labelHeader String '{0} / {1}' Header text.
labelFooter String '{0} - {1} of {2}' Footer text.
placement String 'bottom' (Only in button tag) Where the iconpicker will be display. left|top|bottom|right
rows Integer 4 Number of rows to display in the iconpicker. Value 0 indicates all rows.
search Boolean true Indicates whether to show or hide the search field. true|false
searchText String 'Search icon' Text of search field.
selectedClass String 'btn-warning' Class of the selected icon.
unselectedClass String 'btn-default' Class of the icons unselected.
                    // Default options
$('#target').iconpicker();

// Custom options
$('#target').iconpicker({ 
    align: 'center', // Only in div tag
    arrowClass: 'btn-danger',
    arrowPrevIconClass: 'glyphicon glyphicon-chevron-left',
    arrowNextIconClass: 'glyphicon glyphicon-chevron-right',
    cols: 10,
    footer: true,
    header: true,
    icon: 'fa-bomb',
    iconset: 'fontawesome',   
    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: ''
});

                

Events.

Name Description
.on('change', function(e){}) This event fires when select an icon.
                            $('#target').on('change', function(e) { 
    console.log(e.icon);
});

                        
Console

Methods.

Name Description
.iconpicker('setAlign', String) (Only in div tag) Sets align of the iconpicker. left|center|right
.iconpicker('setArrowClass', String) Sets class of the arrows.
.iconpicker('setArrowPrevIconClass', String) Sets icon class of the previous arrow.
.iconpicker('setArrowNextIconClass', String) Sets icon class of the next arrow.
.iconpicker('setCols', Integer) Sets the columns to display in the iconpicker. Min value is: 4
.iconpicker('setFooter', Boolean) Sets whether to show or hide the footer. true|false
.iconpicker('setHeader', Boolean) Sets whether to show or hide the header. true|false
.iconpicker('setIcon', String) Sets an icon.
.iconpicker('setIconset', String | Object) Sets an iconset. glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon
Object structure is:
{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }
.iconpicker('setLabelHeader', String) Sets header text.
.iconpicker('setLabelFooter', String) Sets footer text.
.iconpicker('setPlacement', String) (Only in button tag) Sets where the iconpicker will be display. left|top|bottom|right
.iconpicker('setRows', Integer) Sets the rows to display in the iconpicker. Value = 0 indicates all rows.
.iconpicker('setSearch', Boolean) Sets whether to show or hide the search field. true|false
.iconpicker('setSearchText', String) Sets the text search field.
.iconpicker('setSelectedClass', String) Sets class of the selected icon.
.iconpicker('setUnselectedClass', String) Sets class of the icons unselected.
                    $('#target').iconpicker()
            .iconpicker('setAlign', 'center') // Only in div tag
            .iconpicker('setArrowClass', 'btn-success')
            .iconpicker('setArrowPrevIconClass', 'glyphicon glyphicon-chevron-left')
            .iconpicker('setArrowNextIconClass', 'glyphicon glyphicon-chevron-right')
            .iconpicker('setCols', 9)
            .iconpicker('setFooter', true)
            .iconpicker('setHeader', true)
            .iconpicker('setIcon', 'glyphicon-pause')
            .iconpicker('setIconset', {
                iconClass: 'glyphicon',
                iconClassFix: 'glyphicon-',
                icons: [
                    'fast-backward',
                    'step-backward',
                    'backward',
                    'play',
                    'pause',
                    'stop',
                    'forward',
                    'step-forward',
                    'fast-forward'
                ]        
            })            
            .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');

                

See in action. Button Builder.

Full width button

                    
                

Leave your comments or fixes here.