<div class="wizdom-icon-picker">
    <div class="dropdown ui-iconpicker" ng-class="{ disabled : disabled }" dropdown style="display:inline">
       <div class="btn-group" role="group" aria-label="...">
            <a class="btn btn-iconpicker dropdown-toggle" dropdown-toggle href="" ng-style="iconStyle">
                <i ng-show="iconClass" class="{{ iconClass }}" ng-style="iconStyle"></i>
                <span ng-hide="iconClass">{{'Select icon' | translate}}</span>
            </a>
            <a class="btn btn-default" title="{{'Background color' | translate }}" ng-model='iconBackColor' colorpicker ng-hide="hideColorSelector">
                <i class="glyphicon glyphicon-text-background"></i>
            </a>
            <a class="btn btn-default" title="{{'Foreground color' | translate }}" ng-model='iconForeColor' colorpicker ng-hide="hideColorSelector">
                <i class="glyphicon glyphicon-text-color"></i>
            </a>
        </div>

        <ul class="dropdown-menu" role="menu">
            <li ng-repeat="class in classes">
                <button class="btn btn-default" type="button" ng-click="$parent.iconClass = class">
                    <span class="{{ class }}"></span>
                </button>
            </li>
        </ul>
    </div>
</div>
