Icons

Connecting and basic template

Library is connected via calling of extension:

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

Basic template

<div class="ui-ctl ui-ctl-textbox ui-ctl-before-icon ui-ctl-after-icon"> <!-- 1. Modifiers .ui-ctl-before-icon and .ui-ctl-after-icon -->
    <div class="ui-ctl-before ui-ctl-icon-search"></div> <!-- 2. Additional element on the left side .ui-ctl-before-->
    <button class="ui-ctl-after ui-ctl-icon-clear"></button> <!-- 2. Additional element on the right side .ui-ctl-after -->
	<input type="text" class="ui-ctl-element"> 
</div>

Several conditions must be met to add an icon:

1. Define, from which side the icon will be displayed. It can be done using one of two modifiers:

   .ui-ctl-before-icon - sets icon position to the left;

   .ui-ctl-after-icon - sets icon position to the right;

   .ui-ctl-ext-before-icon - set icon position to the left outside the field;

   .ui-ctl-ext-after-icon - set icon position to the right outside the field.

   Modifier must be assigned to .ui-ctl.

2. Next to to .ui-ctl-element locate the icon container with class .ui-ctl-after and/or .ui-ctl-before. Please note, the portion of class name *-after-* and/or *-before-* must correspond to similar modifier of the parent (item 1).
3. When icon is required outside the field, use the suffix '-ext-' in parent's classes and for the icon itself.
4. Add an class from this list of available classes to the icon container.

Template examples

<!-- .ui-ctl.ui-ctl-after-icon > div.ui-ctl-after.ui-ctl-icon-search + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon">
    <div class="ui-ctl-after ui-ctl-icon-search"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-before-icon > div.ui-ctl-after.ui-ctl-icon-search + input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-before-icon">
    <div class="ui-ctl-after ui-ctl-icon-search"></div>
    <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-before-icon.ui-ctl-after-icon > 
        div.ui-ctl-before.ui-ctl-icon-search + 
        div.ui-ctl-after.ui-ctl-icon-angle + 
        input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-before-icon ui-ctl-after-icon">
    <div class="ui-ctl-before ui-ctl-icon-search"></div>
    <div class="ui-ctl-after ui-ctl-icon-clear"></div>
    <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-before-icon.ui-ctl-ext-after-icon > 
        div.ui-ctl-before.ui-ctl-icon-search + 
        div.ui-ctl-after.ui-ctl-icon-angle + 
        input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-before-icon  ui-ctl-ext-after-icon">
    <div class="ui-ctl-before ui-ctl-icon-search"></div>
    <div class="ui-ctl-ext-after ui-ctl-icon-loader"></div>
    <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

Icon as button

Very often, an icon must function as a button. For example, in search box. Rename the tag with icon in <button>, or add a modifier .ui-ctl-icon-btn.

<!-- .ui-ctl.ui-ctl-after-icon > 
        div.ui-ctl-after.ui-ctl-icon-search.ui-ctl-icon-btn + 
        input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon">
    <div class="ui-ctl-after ui-ctl-icon-btn ui-ctl-icon-search"></div>
    <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > 
        button.ui-ctl-after.ui-ctl-icon-search + 
        input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon">
    <button class="ui-ctl-after ui-ctl-icon-search"></button>
    <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-search + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-search"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-calendar + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-calendar"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-dots + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-dots"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-phone + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-phone"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-mail + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-mail"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-clock + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-clock"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-angle + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-angle"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-clear + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-clear"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>

<!-- .ui-ctl.ui-ctl-after-icon > .ui-ctl-after.ui-ctl-icon-loader + .ui-ctl-element-->
<div class="ui-ctl ui-ctl-after-icon">
   <div class="ui-ctl-after ui-ctl-icon-loader"></div>
   <input type="text" class="ui-ctl-element ui-ctl-textbox">
</div>