I have encountered issues with v-icon not displaying in Vuetify, so I wrote an article on how to resolve it.

⇨For more information about Vuetify, check out this article.

Conclusion

Some icons may not be usable.

<v-icon>mdi-plus-thick</v-icon>
<v-icon>mdi-account-box</v-icon>

Please try this code. It is usable as of May 2022.

Additionally, you can use icons from the following site.

Material Design Icons Official Website

Here is the flow.

Icons Worked in Udemy Tutorial but Not in Practice

In this article, I discuss a Udemy course that was extremely helpful when I first started working with Vue.js.

The course is titled

Building Single Page Applications with Vue.js + Firebase

In the tutorial, the instructor mentioned to "add Vuetify", and v-icon was usable. However, it did not work for me.

Solution

You can find icons on the Material Design Icons Official Website.

The "mdi" stands for Material Design Icons.

For example, when you want to use the account-box icon, you should append "mdi-" in front of it, like "mdi-account-box".

It seems like the icons used in the tutorial may no longer be functional.

<v-icon>mdi-plus-thick</v-icon>
<v-icon>mdi-account-box</v-icon>

It will display like this.

This code was working as of May 2022, so try copying and using it to confirm. If it still doesn't work, there may be other issues.

Summary

That's all.

I hope this can be helpful to someone.

If you have any feedback or questions, feel free to DM me on Twitter.