Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature Request] Material Design Icons with "outlined" theme #4164

Closed
michaelsogos opened this issue May 30, 2018 · 11 comments
Closed

[Feature Request] Material Design Icons with "outlined" theme #4164

michaelsogos opened this issue May 30, 2018 · 11 comments
Labels
C: VIcon VIcon S: has PR The issue has a pending Pull Request S: needs docs update The change requires an update to the documentation T: documentation T: feature A new feature

Comments

@michaelsogos
Copy link

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
Copy link
Member

KaelWD commented May 30, 2018

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.

@KaelWD KaelWD closed this as completed May 30, 2018
@KaelWD KaelWD added the invalid The issue is missing information or is not a valid bug/feature request label May 30, 2018
@jacekkarczmarczyk jacekkarczmarczyk mentioned this issue Sep 10, 2018
Closed
@jjvainav
Copy link

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
Copy link
Member

KaelWD commented Mar 20, 2019

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

@KaelWD KaelWD reopened this Mar 20, 2019
@KaelWD KaelWD added T: feature A new feature and removed invalid The issue is missing information or is not a valid bug/feature request labels Mar 20, 2019
@douglasg14b
Copy link

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

@jenhjlim
Copy link

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
Copy link
Member

blalan05 commented Apr 16, 2019 •
edited

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

@blalan05 blalan05 added S: needs docs update The change requires an update to the documentation T: documentation labels Apr 16, 2019
@michaelsogos
Copy link
Author

Hi @blalan05

yes, that's is our solution also.

@jjangga0214 jjangga0214 mentioned this issue Jul 7, 2019
Closed
8 tasks
@jacekkarczmarczyk jacekkarczmarczyk added the S: has PR The issue has a pending Pull Request label Jul 7, 2019
jjangga0214 added a commit to jjangga0214/vuetify that referenced this issue Jul 8, 2019
@jjangga0214
docs: kind guide for using missing material icons
739783d 
Some material icons are missing by default. For example, `person` and `person_outline` are
available, but `visibility_outline` isn't while `visibility` is. This has been a known issue (e.g.
vuetifyjs#4164) for a while. Therefore I hereby add a guide as a documentation for using missing material
icons.

fix vuetifyjs#4164
@jjangga0214 jjangga0214 mentioned this issue Jul 8, 2019
Merged
8 tasks
MajesticPotatoe pushed a commit that referenced this issue Jul 8, 2019
@jjangga0214 @MajesticPotatoe
docs(icons) add guide for missing material icons (#7776)
742b218 
* docs: kind guide for using missing material icons

Some material icons are missing by default. For example, `person` and `person_outline` are
available, but `visibility_outline` isn't while `visibility` is. This has been a known issue (e.g.
#4164) for a while. Therefore I hereby add a guide as a documentation for using missing material
icons.

fix #4164

* docs: fix typo
@jacekkarczmarczyk
Copy link
Member

Fixed in #7776

@devmeireles
Copy link

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
Copy link

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

@june07
Copy link

june07 commented Feb 15, 2023

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

#16607

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C: VIcon VIcon S: has PR The issue has a pending Pull Request S: needs docs update The change requires an update to the documentation T: documentation T: feature A new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: kind guide for using missing material icons jjangga0214/vuetify