Vuetify: [Feature Request] Material Design Icons with "outlined" theme

[michaelsogos]

Problem to solve

A way to choose between different "styles" declared and part of MATERIAL DESIGN ICON web site

Proposed solution

Following the discussion https://github.com/google/material-design-icons/issues/773 seems that exists the possibility to use the same ICON (in our example shopping_cart ) in any of the possible variants.

Based on this https://material.io/tools/icons/?search=settings&style=baseline is clear that VUETIFY automatically draw icons from baseline style, but also exists outlined, rounded, sharp styles; and in same case outlined looks better, especially on standard buttons.
So the proposed solution is to add a CSS CLASS like icon--outlined or <v-icon icon--outlined>...</v-icon> to draw an outlined version of the same icon.
In case sounds goods also a css class for others styles like icon--sharp, icon--rounded.

About the style two-tone, it seems to break design language even if it is part of material design guidelines. So in case it can stay out of requirements in our opinion :)

[KaelWD]

google/material-design-icons#773

None of that shit actually exists anywhere, and google haven't shown how to use it. We can't support something if we don't know what it even is. Everyone in that issue is just speculating about possible APIs.

[jjvainav]

None of that shit actually exists anywhere, and google haven't shown how to use it. We can't support something if we don't know what it even is. Everyone in that issue is just speculating about possible APIs.

https://fonts.googleapis.com/css?family=Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

[KaelWD]

Took their damn time. There still isn't any documentation about it though, and the github repo hasn't been updated in years.

[douglasg14b]

They also seem to have two tone icons as well that look good in some scenarios

[aspynlim]

We can now use other themes when including the following CDN: <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<i class="material-icons">feedback</i>
<i class="material-icons-outlined">feedback</i>
<i class="material-icons-two-tone">feedback</i>
<i class="material-icons-round">feedback</i>
<i class="material-icons-sharp">feedback</i>

(https://stackoverflow.com/a/51415409/10021131)

I tested it out, and it worked!

But, this is not for Vuetify. It'd be great to be able to use other material icon themes in Vuetify. :)

[blalan05]

Along with: <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">`

you can use it with v-icon by adding the proper css class for the desired font.
https://codepen.io/anon/pen/pBdVEL?editors=0001

[michaelsogos]

Hi @blalan05

yes, that's is our solution also.

[jacekkarczmarczyk]

Fixed in https://github.com/vuetifyjs/vuetify/pull/7776

[devmeireles]

We can now use other themes when including the following CDN: <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

<i class="material-icons">feedback</i>
<i class="material-icons-outlined">feedback</i>
<i class="material-icons-two-tone">feedback</i>
<i class="material-icons-round">feedback</i>
<i class="material-icons-sharp">feedback</i>

(https://stackoverflow.com/a/51415409/10021131)

I tested it out, and it worked!

But, this is not for Vuetify. It'd be great to be able to use other material icon themes in Vuetify. :)

That's worked for me

[alanscordoba]

Junto con: <linkhref = " https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp " rel = "stylesheet"> `

puede usarlo con v-icon agregando la clase css adecuada para la fuente deseada.
https://codepen.io/anon/pen/pBdVEL?editors=0001

Eso funciono para mi