Added ability using icons instead of images in options.

README.md

@@ -17,7 +17,7 @@ LC Select has been created focusing on these aspects: a pure javascript (ES6) pl
 - (optional) searchbar with minimum fields threshold
 - (optional) maximum selectable options
 - complete keyboard events integration
-- option images support
+- option images, icons support
 - mobile ready
 - multilanguage ready
 
@@ -50,18 +50,20 @@ new lc_select('select');
 
 ## Specific HTML attributes
 
-There are two optional attributes you can use to take advantage of plugin functionalities:
+There are three optional attributes you can use to take advantage of plugin functionalities:
 
 - **data-placeholder:** to be used on the *select* HTML tag, sets field placeholder in case of no option selected<br/>(check also *pre_placeh_opt* option for simple selects)
 
 - **data-image:** to be used on *optgroup* or *option* HTML tags, sets option's image
 
+- **data-icon:** to be used on *optgroup* or *option* HTML tags, sets option's icon (has priority over data-image)
+
 ```
 <select name="simple" data-placeholder="Select something please ..">
     <optgroup label="Europe" data-image="demo-img/eu.svg">
         <option value="ita" data-image="demo-img/ita.svg">Italy</option>
         <option value="fra" data-image="demo-img/fra.png">France</option>
-        <option value="esp" data-image="demo-img/esp.png">Spain</option>
+        <option value="esp" data-icon="icon-flag-esp icon-lg icon-yellow">Spain</option>
     </optgroup>
 </select>
 ```

lc_select.js

@@ -378,14 +378,16 @@
             select.querySelectorAll('option').forEach(opt => {
 
                 if(opt.selected) {
-                    const img = (opt.hasAttribute('data-image')) ? '<i class="lcslt-img" style="background-image: url(\''+ opt.getAttribute('data-image').trim() +'\')"></i>' : ''; 
-
+                    const img = (opt.hasAttribute('data-image')) ? '<i class="lcslt-img" style="background-image: url(\''+ opt.getAttribute('data-image').trim() +'\')"></i>' : '',
+                        icon = opt.hasAttribute('data-icon') ? '<i class="lcslt-icon ' + opt.getAttribute('data-icon').trim() + '"></i>' : '';
+
+                    const image = icon.length ? icon : img;
                     if(is_multiple) {
-                        code += '<div class="lcslt-multi-selected" data-val="'+ opt.getAttribute('value') +'" title="'+ opt.innerHTML +'"><span>'+ img + opt.innerHTML +'</span></div>';
+                        code += '<div class="lcslt-multi-selected" data-val="'+ opt.getAttribute('value') +'" title="'+ opt.innerHTML +'"><span>'+ image + opt.innerHTML +'</span></div>';
                     } 
                     else {
-                        const single_placeh_mode = (options.pre_placeh_opt && opt.hasAttribute('data-lcslt-placeh')) ? 'class="lcslt-placeholder"' : ''; 
-                        code = '<span '+ single_placeh_mode +' title="'+ opt.innerHTML +'">'+ img + opt.innerHTML +'</span>';    
+                        const single_placeh_mode = (options.pre_placeh_opt && opt.hasAttribute('data-lcslt-placeh')) ? 'class="lcslt-placeholder"' : '';
+                        code = '<span '+ single_placeh_mode +' title="'+ opt.innerHTML +'">'+ image + opt.innerHTML +'</span>';
                     }
 
                     sel_opts++;
@@ -501,6 +503,7 @@
                 group_name : [map] {
                     opt_val : {
                         img     : (string) ,
+                        icon     : (string) ,
                         name    : (string),
                         selected: (bool),
                         disabled: (bool)
@@ -530,6 +533,7 @@
 
                 let obj     = {
                     img     : (opt.hasAttribute('data-image')) ? opt.getAttribute('data-image').trim() : '',
+                    icon    : (opt.hasAttribute('data-icon')) ? opt.getAttribute('data-icon').trim() : '',
                     name    : opt.innerHTML,
                     selected: opt.selected,
                     disabled: opt.disabled,
@@ -577,17 +581,24 @@
                     const dis_class = (disabled_groups.indexOf(group) !== -1) ? 'lcslt-disabled': '';
 
                     const optgroup = select.querySelector('optgroup[label="'+ group_key +'"]'),
-                          img = (optgroup.hasAttribute('data-image') && optgroup.getAttribute('data-image')) ? '<i class="lcslt-img" style="background-image: url(\''+ optgroup.getAttribute('data-image').trim() +'\')"></i>' : '';
+                        img = (optgroup.hasAttribute('data-image') && optgroup.getAttribute('data-image'))
+                            ? '<i class="lcslt-img" style="background-image: url(\'' + optgroup.getAttribute('data-image').trim() + '\')"></i>'
+                            : '',
+                        icon = (optgroup.hasAttribute('data-icon') && optgroup.getAttribute('data-icon'))
+                            ? '<i class="lcslt-icon ' + optgroup.getAttribute('data-icon').trim() + '"></i>' : '';
+
+                    const image = icon.length ? icon : img;
 
                     code += 
-                        '<li class="lcslt-group '+ dis_class +'"><span class="lcslt-group-name">'+ img + group_key +'</span>' +
+                        '<li class="lcslt-group '+ dis_class +'"><span class="lcslt-group-name">'+ image + group_key +'</span>' +
                         '<ul class="lcslt-group-opts">';
                 }
 
                 // group options
                 structure.get(group_key).forEach((opt, opt_key) => {
                     const vals          = structure.get(group_key).get(opt_key),
                           img           = (vals.img) ? '<i class="lcslt-img" style="background-image: url(\''+ vals.img +'\')"></i>' : '',
+                          icon          = (vals.icon) ? '<i class="lcslt-icon ' + vals.icon + '"></i>' : '',
                           sel_class     = (vals.selected) ? 'lcslt-selected' : '',
                           dis_class     = (vals.disabled || disabled_groups.indexOf(group) !== -1) ? 'lcslt-disabled': '',
                           hlight_class  = (!highligh_set && sel_class) ? 'lcslt-dd-opt-hlight' : '';
@@ -597,9 +608,10 @@
                         return;        
                     }
 
+                    const image = icon.length ? icon : img;
                     code += 
                         '<li class="lcslt-dd-opt '+ sel_class +' '+ dis_class +' '+ hlight_class +'" data-val="'+ opt_key +'">'+ 
-                            '<span>'+ img + vals.name +'</span>'+
+                            '<span>'+ image + vals.name +'</span>'+
                         '</li>';
                 });
 

themes/dark.css

@@ -177,9 +177,14 @@
 
 
 /* images */
-.lcslt-img {
+.lcslt-img, .lcslt-icon {
     display: inline-block;
     height: 17px;
     width: 20px;
     margin-right: 7px;
 }
+
+.lcslt-icon {
+    vertical-align: middle;
+    font-size: 17px;
+}

themes/dark_prefixed.css

@@ -177,9 +177,14 @@
 
 
 /* images */
-.lcslt-dark .lcslt-img {
+.lcslt-dark .lcslt-img, .lcslt-dark .lcslt-icon {
     display: inline-block;
     height: 17px;
     width: 20px;
     margin-right: 7px;
 }
+
+.lcslt-dark .lcslt-icon {
+    vertical-align: middle;
+    font-size: 17px;
+}

themes/light.css

@@ -176,9 +176,14 @@
 
 
 /* images */
-.lcslt-img {
+.lcslt-img, .lcslt-icon {
     display: inline-block;
     height: 17px;
     width: 20px;
     margin-right: 7px;
 }
+
+.lcslt-icon {
+    vertical-align: middle;
+    font-size: 17px;
+}

themes/light_prefixed.css

@@ -176,9 +176,14 @@
 
 
 /* images */
-.lcslt-light .lcslt-img {
+.lcslt-light .lcslt-img, .lcslt-light .lcslt-icon {
     display: inline-block;
     height: 17px;
     width: 20px;
     margin-right: 7px;
 }
+
+.lcslt-light .lcslt-icon {
+    vertical-align: middle;
+    font-size: 17px;
+}