Using Material Design icons

If you are a fan of using Google's material design, then you might prefer to use its icons set.

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:

Field status Icon
Valid <i class="material-icons">check</i>
Invalid <i class="material-icons">clear</i>
Being validated <i class="material-icons">graphic_eq</i>

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.

More examples