Intermediate

Icons with UI Components

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

Icons can be initialized in three 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 choice and pick their names to insert them in your apps.

Related sample:  Icons

View Icon

UI-related icon looks like a button with a border. Text label for this icon type is not supposed.

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

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

Button with an Icon

Table 1 Icon types
type:"icon"
type:"iconTop"
type:"iconButton"
type:"iconButtonTop"
{ view:"button", type:"icon", icon:"mail", label:"Mail", width:80 }
  • 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 don't normally take buttons - 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 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 on 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 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

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 FontAwesome collection instead of the default one, specify its name as value of 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 the new CSS rule that redefines the default one. Nothing is changed in the control configuration:

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

As with richselect, combo control uses "fa-angle-down" icon which CSS should be modified:

.webix_input_icon.fa-angle-down:before{
    content:""; /*removes FontAwesome icon */
    background-image: url("search.png");
    width:20px;
    height:20px;
    display:block;
}

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{
...
}

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

Back to top