Using SVG icons

For more customization, you might want to use SVG icons in additonal to the CSS classes. Fortunately, the Icon plugin provides an event named plugins.icon.set that you can hook on when the field is being validated, valid or invalid:

We can use the SVG icon by setting e.iconElement.innerHTML.

You might need to set the width, height attributes for the SVG element to make it fit in the field. Also, the icon color can be adjusted by setting the stroke attribute:

Using with FontAwesome SVG icons

The following example shows how to listen on this event and display SVG icons provided by FontAwesome:

FontAwesome Icon SVG code
sync
times
check

Using with UIKit framework

The following example shows how to use SVG icons provided by UIKit framework:

UIKit Icon SVG code
refresh
close
check

More examples