When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.

If you created a container element, that wraps around other elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way :)

Currently the only way is to skip the icon option completely and use pure CSS for that.

You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i, 
#vc_your_element i.vc_element-icon {
	background-position: 0 0;
	background-image: url(/path_to_images/vc_your_element.png)!important;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-ms-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i,

#vc_your_element i.vc_element-icon {

background-position: 0 0;

background-image: url(/path_to_images/vc_your_element.png)!important;

-webkit-background-size: contain;

-moz-background-size: contain;

-ms-background-size: contain;

-o-background-size: contain;

background-size: contain;

}

The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.

Visual Composer – Fixing icon bleeding to child elements in admin

Enjoy coding …

Alexander