Yea not only that, the link you should actually view the icons is different in the docs so it's unlikely that any icon from material.io work on those, you need to get them from the way uglier site : materialdesignicons.com and put mdi- in front.
if google material icons are not working for you follow these 3 steps 1. npm install material-design-icons-iconfont --save 2. In mian.js > import 'material-design-icons-iconfont/dist/material-design-icons.css' 3. In vuetify.js > export default new Vuetify({ iconfont: 'md', }); You don't have to write mdi or anything else in front of the keyword just write the keyword as it is written on the material(dot)io/resources/icons/
Use the documentation, this is based on 1,5, vuetify is now on 2.0+ (No problem following a long but you need to use the documentation to double check cirtain things.
When I try to add an icon, the icon does not appear but rather just says the name. I searched Google and some people said that you have to include import the icons but I never saw you do this. Did I miss something?
I've installed every material design related dependencies and devDependencies I could find online and I still can't get the the Material Design Icons to show on my page. Can you advise why I'm getting this problem?
For not working icons: try to use this website: materialdesignicons.com/ and put mdi- prefix before each name. The one that ninja used called favorite is actually called 'heart' and it works just fine. It seems there was some updates on Vuetify since Ninja made this videos.
If email isn't working, then use mdi-email instead. "mdi" here means Material Design Icon.
THank you sir
The answer I was looking for, thank you.
Thanks! It works for me...
Bro you saved me so much time. The documentation doesn't even say this lol
if email is not working try to type mdi-email
try adding mdi- before any icon name. For example mdi-email
Yea not only that, the link you should actually view the icons is different in the docs so it's unlikely that any icon from material.io work on those, you need to get them from the way uglier site : materialdesignicons.com and put mdi- in front.
You just saved me so much trial and error! Ty!!
thanks man!
it works for me, after i added under
An update: In vuetify@2.1.13, you must now use 'text' instead of 'flat' to create a flat button where the button outline is only seen upon mouse hover
If "flat" prop is not working for you, use "text" prop :)
thnx bro
Thank you so much! I was so confused...
yeah but that's not changing background color whenever i hover it
great
love the community here, this course was released years ago, but you guys keep the content up-to-date. Cheers lads.
Fantastic comments helping keep this course up to date!
if google material icons are not working for you follow these 3 steps
1. npm install material-design-icons-iconfont --save
2. In mian.js > import 'material-design-icons-iconfont/dist/material-design-icons.css'
3. In vuetify.js >
export default new Vuetify({
iconfont: 'md',
});
You don't have to write mdi or anything else in front of the keyword just write the keyword as it is written on the material(dot)io/resources/icons/
This worked for me (although it's is main.js)!
Works a treat, thanks, probably saved me 30 minutes of my time!
8:51 If mdi-favorite is not working, use mdi-heart.
@@sangmadenaufal6339 I got it from here: materialdesignicons.com/
You now have to use mdi- before the icon name e.g.(mdi-email)
now to add icons, you can't write immediately "email" in between . You should write mdi-email. mdi- should be pretext to your "choice"
I love your style, every is very easy !
You are so good teacher! :)
Use the documentation, this is based on 1,5, vuetify is now on 2.0+ (No problem following a long but you need to use the documentation to double check cirtain things.
I noticed that your displays with some padding, where as mine displays flush to the left.
add "mx-2" inside of the class
Hi Shaun, very good tutorial, I love your style, thank you Shaun! 👍👍❤️
When I try to add an icon, the icon does not appear but rather just says the name. I searched Google and some people said that you have to include import the icons but I never saw you do this. Did I miss something?
You need to add 'mdi-' before the icon name. In this case, 'mdi-email'.
@@chad7904 and left not working, help me
Do you know where can i find all lists of props of each vuetify component?
v-btn display a block button that covers the length of the whole page. How do I make it a normal button- the size of its text with padding
I am using vite and vue 3 but when I installed vuetify, it is not working in my project...
if i create a button it is occupying entire screen. how can i reduce its width by default??
Awesome man!! Thank you very much for all your work!!
Some of the code is out of date, but think of it more of an active way to learn how to use the official documentation!
hii.. How to give border-color.. I am not able to do it. please help
Icons are not working here. It shows the name of the icon as text. How can i fix it?
hi, how do you remove the padding for your v-btn please ?
If the flat prop doesnt work for you then replace it with plain. Alot has changed
Would have loved to see you add some functionality to the buttons with @input or @click props Shaun. Where can I find tutorials like that?
I've installed every material design related dependencies and devDependencies I could find online and I still can't get the the Material Design Icons to show on my page. Can you advise why I'm getting this problem?
Most other comments said = "You need to add 'mdi-' before the icon name. Eg 'mdi-email'.
" It worked for me. No need to install any dependencies
Thank you for the detailed tutorial love it!
I got the flat effect by using a text prop 3:38
doubt: how can i add personal icons in vuetify? I dont want to use mdi
vuetifyjs.com/en/customization/icons/
icon does not work. It gives just text instead of icon. May be you show how recognize icons first?
For not working icons: try to use this website: materialdesignicons.com/ and put mdi- prefix before each name. The one that ninja used called favorite is actually called 'heart' and it works just fine. It seems there was some updates on Vuetify since Ninja made this videos.
Yeah, it's strange that it's still favorite on material.io and it doesn't work with mdi-
doenst work. Do I have to import something? Thanks
it needs to be NOT
I cannot add mdi-favourite icon why?
Try mdi-heart
very nice !
Greate videos as always. Thank you!
this video series need to be seem by many more people lol
"mdi-heart" for the favorite button icon
Where have you been till now
what accent do you use net ninja??
British.
I was here. Thanks!
depressed removes shadow? it should put shadow, makes more sense term wise lol
Hello. It's great!
I had to do the following before the icons would work: 1. npm install material-design-icons 2. Add this to my html:
Thank you. I see some things have changed since creating this tutorial.
Even buttons are depresed haha 😂
GoodJob!
thx
Sensei teach us your accent too 😅
Depressed button
Haha that's me
2:06 hahahaha
Poor depressed button 🤣
LOL Depressed buttons
suicidal button 🤣