<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" ng-click="vm.hasClick = true" ng-style="{'color': vm.returnObj.color, 'background-color': vm.returnObj.backgroundColor}" dropdown-toggle href="">
                <i ng-show="vm.returnObj.icon" class="{{ vm.returnObj.icon }}"></i>
                <span ng-hide="vm.returnObj.icon">{{'Select icon' | translate}}</span>
            </a>
            <a class="btn btn-default" title="{{'Background color' | translate }}" ng-model="vm.returnObj.backgroundColor" colorpicker ng-hide="hideColorSelector">
                <i class="glyphicon glyphicon-text-background"></i>
            </a>
            <a class="btn btn-default" title="{{'Foreground color' | translate }}" ng-model="vm.returnObj.color" colorpicker ng-hide="hideColorSelector">
                <i class="glyphicon glyphicon-text-color"></i>
            </a>
        </div>
        <ul class="dropdown-menu" role="menu">
            <li ng-if="vm.hasClick" ng-repeat="class in vm.classes">
                <button class="btn btn-default" type="button" ng-click="vm.returnObj.icon = vm.classPrefix + class">
                    <span ng-class="vm.classPrefix + class"></span>
                </button>
            </li>
        </ul>
    </div>
</div>