Icons with UI Components

Icons can be nested into all components and their items. You can put an icon on the toolbar in the form of buttons, decorate tabbar tabs and accordion panes as well as list and dataview items with them, etc.

Icons can be initialized in the following ways:

  • as separate views;
  • as button types;
  • as CSS classes.

Icons are taken from the Font Awesome collection. There you can find plenty of icons to your taste and take their names to insert them in your apps.

Related sample:  Icons

View Icon

A UI-related icon looks like a button with a border. A text label isn't supposed for this icon type.

{ view:"icon", icon:"envelope"},
{ view:"icon", icon:"users"}

The value for the icon property is the name of the needed icon.

Button with Icon

Table 1 Icon types

{ view:"button", type:"icon", icon:"envelope", label:"Mail" }
  • type - the property that turns a standard button into an icon button:
    • icon - an icon button without a distinct border;
    • iconTop - an big borderless icon button with a text label below an icon;
    • iconButton - a small icon button with a label right of the icon;
    • iconButtonTop - a big icon button with a label below the icon;
  • icon - name of an icon (looks for it on Font Awesome);
  • label - text label for an icon button;
  • width - width of a button with label and icon;
  • badge - an orange circle that notifies about new messages.

'webix-icon' CSS Class

This method of icon initialization fits the components and items that normally have not buttons, but: tabs (they are buttons themselves), panes, list and dataview items, datatable cells. In this case, icons are not buttons and perform a decorative function.

Possible CSS classes are as follows:

  • 'webix_icon fa-envelope' - a standard icon (white or black depending on the current skin);
  • 'webix_input_icon fa-envelope' - a light grey icon adjusted for use in input fields.

Both of them include an icon name that can be checked at the Font Awesome site.

Through CSS property:

Multiview tabs

{ view:"tabbar", options:[
    { value:"mail",  label:"Mail",  css:"webix_icon fa-envelope"},
    { value:"users", label:"Users", css:"webix_icon fa-users"},
    { value:"cog",   label:"cog" ,  css:"webix_icon fa-cog"}

By adding extra HTML:

An additional HTML element with an 'icon' class can be added to the text value of any component item:

AccordionItem pane with an icon

{ header:"<span class='webix_icon fa-envelope'></span>Mail"}

List item with an icon

{ template:"<span class='webix_icon fa-#icon#'></span> #name#"}

Here the icon's name is in the hash signs, since it comes from the dataset, e.g. in JSON it looks like:

var data=[
    {id:1, name:"item1", icon:"envelope"},
    {id:2, name:"item2", icon:"users"}

Changing Default Icons

The default FontAwesome icons that are used for various controls can be changed to custom ones in several ways.

Setting Other FontAwesome Icon

If you'd like to use another icon from the FontAwesome collection instead of the default one, specify its name as a value of the icon property:

{view:"richselect", label: "Other", options:options, icon:"caret-down"}

As a result, the default richselect) icon, "fa-angle-down", is replaced with the one you've set.

Setting a Custom Icon

To set a custom icon that you can provide as a background image, write a new CSS rule that redefines the default one. Nothing is changed in the control configuration:

{view:"combo", label: "Fruit", options:[...] }

The same as richselect, the combo control uses the "fa-angle-down" icon, the CSS of which should be modified:

    content:""; /*removes FontAwesome icon */
    background-image: url("search.png");

Related sample:  Styling Combo Icons

If you want to style one combo on the page while leaving another one unchanged, define a separate css class for the one in question:

{view:"combo", label: "Fruit", options:[...], css:"custom" }

Then the necessary CSS will look like this:

.custom .webix_input_icon.fa-angle-down:before{
    // attributes of the custom CSS class

Component styling is described in detail in the corresponding article of the documentation.

Back to top