Buttons with icons

Description and example

\Bitrix\Main\UI\Extension::load("ui.buttons.icons");

This library is an addition to ui.buttons. It means, that modifier principles are the same as for main library.

Example. Code for buttons

looks as follows:

<!-- .ui-btn.ui-btn-icon-task:empty -->
<button class="ui-btn ui-btn-icon-task"></button>

<!-- .ui-btn.ui-btn-danger.ui-btn-icon-phone-down -->
<button class="ui-btn ui-btn-danger ui-btn-icon-phone-down">Button</button>

<!-- .ui-btn-split.ui-btn-primary.ui-btn-icon-setting -->
<div class="ui-btn-split ui-btn-primary ui-btn-icon-setting"> 
   <button class="ui-btn-main">Button</button> 
    <button class="ui-btn-menu"></button> 
</div>

Button with icon without text

When you need button only with icon, no space character inside the button, and the button is not a tag <input>. Otherwise, pseudo class :empty is not triggered, and the button will be displayed incorrectly visually.

<!-- .ui-btn.ui-btn-icon-add:empty -->
<button class="ui-btn ui-btn-icon-add"></button>

Modifier .ui-btn-icon-add.

List of icons

Button	Code
	<!-- .ui-btn.ui-btn-icon-add --> <button class="ui-btn ui-btn-icon-add">.ui-btn-icon-add</button> <!-- .ui-btn-split.ui-btn-icon-add --> <div class="ui-btn-split ui-btn-icon-add"> <button class="ui-btn-main">.ui-btn-icon-add</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-stop--> <button class="ui-btn ui-btn-icon-stop">.ui-btn-icon-stop</button> <!-- .ui-btn-split.ui-btn-icon-stop--> <div class="ui-btn-split ui-btn-icon-stop"> <button class="ui-btn-main">.ui-btn-icon-stop</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-start--> <button class="ui-btn ui-btn-icon-start">.ui-btn-icon-start</button> <!-- .ui-btn-split.ui-btn-icon-start--> <div class="ui-btn-split ui-btn-icon-start"> <button class="ui-btn-main">.ui-btn-icon-start</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-pause--> <button class="ui-btn ui-btn-icon-pause">.ui-btn-icon-pause</button> <!-- .ui-btn-split.ui-btn-icon-pause--> <div class="ui-btn-split ui-btn-icon-pause"> <button class="ui-btn-main">.ui-btn-icon-pause</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-setting--> <button class="ui-btn ui-btn-icon-setting">.ui-btn-icon-setting</button> <!-- .ui-btn-split.ui-btn-icon-setting--> <div class="ui-btn-split ui-btn-icon-setting"> <button class="ui-btn-main">.ui-btn-icon-setting</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-task--> <button class="ui-btn ui-btn-icon-task">.ui-btn-icon-task</button> <!-- .ui-btn-split.ui-btn-icon-task--> <div class="ui-btn-split ui-btn-icon-task"> <button class="ui-btn-main">.ui-btn-icon-task</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-info--> <button class="ui-btn ui-btn-icon-info">.ui-btn-icon-info</button> <!-- .ui-btn-split.ui-btn-icon-info--> <div class="ui-btn-split ui-btn-icon-info"> <button class="ui-btn-main">.ui-btn-icon-info</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-search--> <button class="ui-btn ui-btn-icon-search">.ui-btn-icon-search</button> <!-- .ui-btn-split.ui-btn-icon-search--> <div class="ui-btn-split ui-btn-icon-search"> <button class="ui-btn-main">.ui-btn-icon-search</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-follow--> <button class="ui-btn ui-btn-icon-follow">.ui-btn-icon-follow</button> <!-- .ui-btn-split.ui-btn-icon-follow--> <div class="ui-btn-split ui-btn-icon-follow"> <button class="ui-btn-main">.ui-btn-icon-follow</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-unfollow--> <button class="ui-btn ui-btn-icon-unfollow">.ui-btn-icon-unfollow</button> <!-- .ui-btn-split.ui-btn-icon-unfollow--> <div class="ui-btn-split ui-btn-icon-unfollow"> <button class="ui-btn-main">.ui-btn-icon-unfollow</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-print--> <button class="ui-btn ui-btn-icon-print">.ui-btn-icon-print</button> <!-- .ui-btn-split.ui-btn-icon-print--> <div class="ui-btn-split ui-btn-icon-print"> <button class="ui-btn-main">.ui-btn-icon-print</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-add-folder--> <button class="ui-btn ui-btn-icon-add-folder">.ui-btn-icon-add-folder</button> <!-- .ui-btn-split.ui-btn-icon-add-folder--> <div class="ui-btn-split ui-btn-icon-add-folder"> <button class="ui-btn-main">.ui-btn-icon-add-folder</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-list--> <button class="ui-btn ui-btn-icon-list">.ui-btn-icon-list</button> <!-- .ui-btn-split.ui-btn-icon-list--> <div class="ui-btn-split ui-btn-icon-list"> <button class="ui-btn-main">.ui-btn-icon-list</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-business--> <button class="ui-btn ui-btn-icon-business">.ui-btn-icon-business</button> <!-- .ui-btn-split.ui-btn-icon-business--> <div class="ui-btn-split ui-btn-icon-business"> <button class="ui-btn-main">.ui-btn-icon-business</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-business-confirm--> <button class="ui-btn ui-btn-icon-business-confirm">.ui-btn-icon-business-confirm</button> <!-- .ui-btn-split.ui-btn-icon-business-confirm--> <div class="ui-btn-split ui-btn-icon-business-confirm"> <button class="ui-btn-main">.ui-btn-icon-business-confirm</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-business-warning--> <button class="ui-btn ui-btn-icon-business-warning">.ui-btn-icon-business-warning</button> <!-- .ui-btn-split.ui-btn-icon-business-warning--> <div class="ui-btn-split ui-btn-icon-business-warning"> <button class="ui-btn-main">.ui-btn-icon-business-warning</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-camera--> <button class="ui-btn ui-btn-icon-camera">.ui-btn-icon-camera</button> <!-- .ui-btn-split.ui-btn-icon-camera--> <div class="ui-btn-split ui-btn-icon-camera"> <button class="ui-btn-main">.ui-btn-icon-camera</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-phone-up--> <button class="ui-btn ui-btn-icon-phone-up">.ui-btn-icon-phone-up</button> <!-- .ui-btn-split.ui-btn-icon-phone-up--> <div class="ui-btn-split ui-btn-icon-phone-up"> <button class="ui-btn-main">.ui-btn-icon-phone-up</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-phone-down--> <button class="ui-btn ui-btn-icon-phone-down">.ui-btn-icon-phone-down</button> <!-- .ui-btn-split.ui-btn-icon-phone-down--> <div class="ui-btn-split ui-btn-icon-phone-down"> <button class="ui-btn-main">.ui-btn-icon-phone-down</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-back--> <button class="ui-btn ui-btn-icon-back">.ui-btn-icon-back</button> <!-- .ui-btn-split.ui-btn-icon-back--> <div class="ui-btn-split ui-btn-icon-back"> <button class="ui-btn-main">.ui-btn-icon-back</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-edit--> <button class="ui-btn ui-btn-icon-edit">.ui-btn-icon-edit</button> <!-- .ui-btn-split.ui-btn-icon-edit--> <div class="ui-btn-split ui-btn-icon-edit"> <button class="ui-btn-main">.ui-btn-icon-edit</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-share--> <button class="ui-btn ui-btn-icon-share">.ui-btn-icon-share</button> <!-- .ui-btn-split.ui-btn-icon-share--> <div class="ui-btn-split ui-btn-icon-share"> <button class="ui-btn-main">.ui-btn-icon-share</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-remove--> <button class="ui-btn ui-btn-icon-remove">.ui-btn-icon-remove</button> <!-- .ui-btn-split.ui-btn-icon-remove--> <div class="ui-btn-split ui-btn-icon-remove"> <button class="ui-btn-main">.ui-btn-icon-remove</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-download--> <button class="ui-btn ui-btn-icon-download">.ui-btn-icon-download</button> <!-- .ui-btn-split.ui-btn-icon-download--> <div class="ui-btn-split ui-btn-icon-download"> <button class="ui-btn-main">.ui-btn-icon-download</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-cloud--> <button class="ui-btn ui-btn-icon-cloud">.ui-btn-icon-cloud</button> <!-- .ui-btn-split.ui-btn-icon-cloud--> <div class="ui-btn-split ui-btn-icon-cloud"> <button class="ui-btn-main">.ui-btn-icon-cloud</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-page--> <button class="ui-btn ui-btn-icon-page">.ui-btn-icon-page</button> <!-- .ui-btn-split.ui-btn-icon-page--> <div class="ui-btn-split ui-btn-icon-page"> <button class="ui-btn-main">.ui-btn-icon-page</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-chat--> <button class="ui-btn ui-btn-icon-chat">.ui-btn-icon-chat</button> <!-- .ui-btn-split.ui-btn-icon-chat--> <div class="ui-btn-split ui-btn-icon-chat"> <button class="ui-btn-main">.ui-btn-icon-chat</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-phone-call--> <button class="ui-btn ui-btn-icon-phone-call">.ui-btn-icon-phone-call</button> <!-- .ui-btn-split.ui-btn-icon-phone-call--> <div class="ui-btn-split ui-btn-icon-phone-call"> <button class="ui-btn-main">.ui-btn-icon-phone-call</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-lock--> <button class="ui-btn ui-btn-icon-lock">.ui-btn-icon-lock</button> <!-- .ui-btn-split.ui-btn-icon-lock--> <div class="ui-btn-split ui-btn-icon-lock"> <button class="ui-btn-main">.ui-btn-icon-lock</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-done--> <button class="ui-btn ui-btn-icon-done">.ui-btn-icon-done</button> <!-- .ui-btn-split.ui-btn-icon-done--> <div class="ui-btn-split ui-btn-icon-done"> <button class="ui-btn-main">.ui-btn-icon-done</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-disk--> <button class="ui-btn ui-btn-icon-disk">.ui-btn-icon-disk</button> <!-- .ui-btn-split.ui-btn-icon-disk--> <div class="ui-btn-split ui-btn-icon-disk"> <button class="ui-btn-main">.ui-btn-icon-disk</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-mail--> <button class="ui-btn ui-btn-icon-mail">.ui-btn-icon-mail</button> <!-- .ui-btn-split.ui-btn-icon-mail--> <div class="ui-btn-split ui-btn-icon-mail"> <button class="ui-btn-main">.ui-btn-icon-mail</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-alert--> <button class="ui-btn ui-btn-icon-alert">.ui-btn-icon-alert</button> <!-- .ui-btn-split.ui-btn-icon-alert--> <div class="ui-btn-split ui-btn-icon-alert"> <button class="ui-btn-main">.ui-btn-icon-alert</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-angle-up--> <button class="ui-btn ui-btn-icon-angle-up">.ui-btn-icon-angle-up</button> <!-- .ui-btn-split.ui-btn-icon-angle-up--> <div class="ui-btn-split ui-btn-icon-angle-up"> <button class="ui-btn-main">.ui-btn-icon-angle-up</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-angle-down--> <button class="ui-btn ui-btn-icon-angle-down">.ui-btn-icon-angle-down</button> <!-- .ui-btn-split.ui-btn-icon-angle-down--> <div class="ui-btn-split ui-btn-icon-angle-down"> <button class="ui-btn-main">.ui-btn-icon-angle-down</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-dots--> <button class="ui-btn ui-btn-icon-dots">.ui-btn-icon-dots</button> <!-- .ui-btn-split.ui-btn-icon-dots--> <div class="ui-btn-split ui-btn-icon-dots"> <button class="ui-btn-main">.ui-btn-icon-dots</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-forward--> <button class="ui-btn ui-btn-icon-forward">.ui-btn-icon-forward</button> <!-- .ui-btn-split.ui-btn-icon-forward--> <div class="ui-btn-split ui-btn-icon-forward"> <button class="ui-btn-main">.ui-btn-icon-forward</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-fail--> <button class="ui-btn ui-btn-icon-fail">.ui-btn-icon-fail</button> <!-- .ui-btn-split.ui-btn-icon-fail--> <div class="ui-btn-split ui-btn-icon-fail"> <button class="ui-btn-main">.ui-btn-icon-fail</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-success--> <button class="ui-btn ui-btn-icon-success">.ui-btn-icon-success</button> <!-- .ui-btn-split.ui-btn-icon-success--> <div class="ui-btn-split ui-btn-icon-success"> <button class="ui-btn-main">.ui-btn-icon-success</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-plan--> <button class="ui-btn ui-btn-icon-plan">.ui-btn-icon-plan</button> <!-- .ui-btn-split.ui-btn-icon-plan--> <div class="ui-btn-split ui-btn-icon-plan"> <button class="ui-btn-main">.ui-btn-icon-plan</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-eye-opened--> <button class="ui-btn ui-btn-icon-eye-opened">.ui-btn-icon-eye-opened</button> <!-- .ui-btn-split.ui-btn-icon-eye-opened--> <div class="ui-btn-split ui-btn-icon-eye-opened"> <button class="ui-btn-main">.ui-btn-icon-eye-opened</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-eye-closed--> <button class="ui-btn ui-btn-icon-eye-closed">.ui-btn-icon-eye-closed</button> <!-- .ui-btn-split.ui-btn-icon-eye-closed--> <div class="ui-btn-split ui-btn-icon-eye-closed"> <button class="ui-btn-main">.ui-btn-icon-eye-closed</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-tariff--> <button class="ui-btn ui-btn-icon-tariff">.ui-btn-icon-tariff</button> <!-- .ui-btn-split.ui-btn-icon-tariff--> <div class="ui-btn-split ui-btn-icon-tariff"> <button class="ui-btn-main">.ui-btn-icon-tariff</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-battery--> <button class="ui-btn ui-btn-icon-battery">.ui-btn-icon-battery</button> <!-- .ui-btn-split.ui-btn-icon-battery--> <div class="ui-btn-split ui-btn-icon-battery"> <button class="ui-btn-main">.ui-btn-icon-battery</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-no-battery--> <button class="ui-btn ui-btn-icon-no-battery">.ui-btn-icon-no-battery</button> <!-- .ui-btn-split.ui-btn-icon-no-battery--> <div class="ui-btn-split ui-btn-icon-no-battery"> <button class="ui-btn-main">.ui-btn-icon-no-battery</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-half-battery--> <button class="ui-btn ui-btn-icon-half-battery">.ui-btn-icon-half-battery</button> <!-- .ui-btn-split.ui-btn-icon-half-battery--> <div class="ui-btn-split ui-btn-icon-half-battery"> <button class="ui-btn-main">.ui-btn-icon-half-battery</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-low-battery--> <button class="ui-btn ui-btn-icon-low-battery">.ui-btn-icon-low-battery</button> <!-- .ui-btn-split.ui-btn-icon-low-battery--> <div class="ui-btn-split ui-btn-icon-low-battery"> <button class="ui-btn-main">.ui-btn-icon-low-battery</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-crit-battery--> <button class="ui-btn ui-btn-icon-crit-battery">.ui-btn-icon-crit-battery</button> <!-- .ui-btn-split.ui-btn-icon-crit-battery--> <div class="ui-btn-split ui-btn-icon-crit-battery"> <button class="ui-btn-main">.ui-btn-icon-crit-battery</button> <button class="ui-btn-menu"></button> </div>
	<!-- .ui-btn.ui-btn-icon-demo--> <button class="ui-btn ui-btn-icon-demo">.ui-btn-icon-demo</button> <!-- .ui-btn-split.ui-btn-icon-demo--> <div class="ui-btn-split ui-btn-icon-demo"> <button class="ui-btn-main">.ui-btn-icon-demo</button> <button class="ui-btn-menu"></button> </div>