How to use rounded icons in vuetify tag <v-icon></v-icon>?

Question

I want to use rounded material icons within the v-icon tag which comes with vuetify. I tried everything on stackoverflow...

<v-icon>announcement</v-icon>

Answer 1

Use v-btn with the fab property

Answer 2

As mentioned here: How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?

You can add the Material+Icons+Round font family in your index.html file:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Round">

You can now make your icons rounded by adding the class 'material-icons-round' to your v-icon:

<v-icon class='material-icons-round'>east</v-icon>

Just tried it with Vuejs 2.x and Last available version of Vuetify - as of dec. 2020 - and it's pretty straightforward! Hope it helps!