# Bootstrap-Iconpicker By Victor Valencia Rico.

A simple iconpicker for Bootstrap 3.x and 4.x
View on Git Hub Lastest version ({0})
Donate Buy me a beer!
Stars
Fork
Releases
Contributors
Download ({0}).zip
Download ({0}).tar.gz

# Configuration. Bootstrap 4.x

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Ionicons CDN -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`2.0.1` //Use CDN => http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css `1.5.2` //Use CDN => http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css

1.- Add the style files: `bootstrap.min.css`, `flag-icon.min.css` and `bootstrap-iconpicker.min.css`

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Flag Icons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.7.0/css/all.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`6.7.0` //Use CDN (Free) => https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css `5.15.4` //Use CDN (Free) => https://use.fontawesome.com/releases/v5.15.4/css/all.css `4.7.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css `4.6.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css `4.5.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css `4.4.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css `4.3.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css `4.2.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css `4.1.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css `4.0.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Weather Icons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`2.0.10` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css `1.2.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.2.0/css/weather-icons.min.css

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Octicons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`4.4.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css `4.3.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.3.0/font/octicons.min.css `4.2.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.1/font/octicons.min.css `4.2.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.0/font/octicons.min.css `4.1.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.1/font/octicons.min.css `4.1.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.0/font/octicons.min.css `4.0.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/4.0.0/font/octicons.min.css `3.5.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css `3.4.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.1/octicons.min.css `3.4.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.0/octicons.min.css `3.3.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.min.css `3.2.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.2.0/octicons.min.css `3.1.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css `3.0.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.1/octicons.min.css `3.0.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.0/octicons.min.css `2.4.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.1/octicons.min.css `2.4.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.0/octicons.min.css `2.3.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.3.0/octicons.min.css `2.2.3` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.3/octicons.min.css `2.2.2` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.2/octicons.min.css `2.2.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.1/octicons.min.css `2.2.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.min.css `2.1.2` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.2/octicons.min.css `2.1.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.1/octicons.min.css `2.1.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.0/octicons.min.css `2.0.2` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css `2.0.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.1/octicons.min.css `2.0.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.0/octicons.min.css

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Typicons CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`2.0.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.1/typicons.min.css `2.0.2` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.2/typicons.min.css `2.0.3` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.3/typicons.min.css `2.0.4` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.4/typicons.min.css `2.0.5` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.5/typicons.min.css `2.0.6` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.6/typicons.min.css `2.0.7` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css `2.0.8` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css `2.0.9` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Material Design CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`2.2.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css `2.1.2` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css `2.1.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.1/css/material-design-iconic-font.min.css `2.1.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.0/css/material-design-iconic-font.min.css `2.0.2` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css `2.0.1` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.1/css/material-design-iconic-font.min.css `2.0.0` //Use CDN => https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.0/css/material-design-iconic-font.min.css `1.1.1` //Deprecated

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Font Awesome 7 CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`7.0.1` //Use CDN (Free) => https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css `6.7.0` //Use CDN (Free) => https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css `5.15.4` //Use CDN (Free) => https://use.fontawesome.com/releases/v5.15.4/css/all.css `4.7.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

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

    <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
    <!-- Font Awesome 5 CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"/>
    <!-- Bootstrap-Iconpicker -->
    <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.min.css"/>

2.- Add the javascript files: `jquery-3.3.1.min.js`, `bootstrap.bundle.min.js` and `bootstrap-iconpicker.bundle.min.js`

    <!-- jQuery CDN -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap CDN -->
    <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap-Iconpicker Bundle -->
    <script type="text/javascript" src="dist/js/bootstrap-iconpicker.bundle.min.js"></script>

Result

#### Iconset versions availables are:

`5.15.4` //Use CDN (Free) => https://use.fontawesome.com/releases/v5.15.4/css/all.css `4.7.0` //Use CDN => https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

# Via data attributes.

#### Initialize.

Add `role="iconpicker"` to initialize the iconpicker.

`button` `role="iconpicker"`

`div` `role="iconpicker"`

    <!-- Button tag -->
    <button class="btn btn-secondary" 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, Iconset Version and Icon Selected.

Add `data-iconset="glyphicon|ionicon|fontawesome4|fontawesome5|fontawesome6|fontawesome7|weathericon|mapicon|octicon|typicon|elusiveicon|flagicon"` to idicates the iconset. Default: `data-iconset="fontawesome6"`

Add `data-iconset-version=""` to idicates the iconset version. Default: `data-iconset="lastest"`

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

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

`data-iconset="fontawesome5"``data-icon="fas fa-wifi"`

`data-iconset="fontawesome6"``data-icon="fas fa-wifi"`

`data-iconset="fontawesome7"``data-icon="fas 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="zmdi-card-sd"`

`data-iconset="flagicon"``data-icon="flag-icon-mx"`

    <!-- 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>
    <button class="btn btn-secondary" data-iconset="fontawesome7" 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>

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

#### 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="fas fa-arrow-left"`

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

`data-arrow-class="btn-success"``data-arrow-prev-icon-class="fas fa-angle-left"``data-arrow-next-icon-class="fas fa-angle-right"`

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

#### 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-secondary"`

`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-secondary"`

`class="btn btn-success"`

`class="btn btn-warning"`

`class="btn btn-danger"`

`class="btn btn-info"`

`class="btn btn-light"`

`class="btn btn-dark"`

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

#### Button addons.

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

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

# 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 | `'fas fa-arrow-left'` | Icon class of the previous arrow.
`arrowNextIconClass` | String | `'fas fa-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 | `'fontawesome6'` | Selected iconset. `glyphicon|ionicon|fontawesome4|fontawesome5|fontawesome6|fontawesome7|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-secondary'` | Class of the icons unselected.

    // 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: 'fontawesome6',
        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|fontawesome4|fontawesome5|fontawesome6|fontawesome7|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', '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');

# See in action. Button Builder.

Button Text
Text:
Color:
Size:

Full width button

Icon:
Icon position:

# Leave your comments or fixes here.