2

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>
J1MAV1GN0N
  • 33
  • 2
  • 6
  • Why not `` – Iyashi Oct 26 '20 at 18:48
  • What exactly is a "rounded icon"? Maybe you are looking for rounded icon buttons https://vuetifyjs.com/en/components/buttons or maybe rounded chip with an icon https://vuetifyjs.com/en/components/chips ? – Beyers Oct 26 '20 at 22:31
  • 1
    With the v-icon tag I'm using material icons by google. There is a certain style called rounded I can add. With v-icon I'm using the regular ones. Within the tags the icon is inserted called by its name. https://material.io/resources/icons/?style=round – J1MAV1GN0N Oct 27 '20 at 16:57

2 Answers2

0

Use v-btn with the fab property

minychillo
  • 395
  • 4
  • 17
  • 1
    The fab property only transforms the button into a circle which I can also achieve with the icon prop for v-btn. – J1MAV1GN0N Oct 27 '20 at 17:03
0

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!

thiout_p
  • 717
  • 11
  • 15