Using Material Design icons
It's up to you to choose suitable icons from Google material design icons for the feedback icons. The following table is just an example of three icons taken from the set:
|Being validated|| |
As you see, each Google material design icon uses pre-defined content instead of a different CSS class. Meanwhile, the Icon's plugin options only accept CSS classes that are added to the icon based on the field validity.
The next section introduces two approaches to solve this problem.
Defining icon content by CSS
By using the
:after CSS selector, we can indicated content of icons as following:
Lastly, you just set the icons for each status of field:
Triggering the event
In order to update the content of icon based on the field validity status, we can trigger the event
plugins.icon.set as mentioned in the Using SVG icons section above.