By default, Quasar uses the Google material icons library. So when we first set up an app, all of those icons are included for us behind the scenes. So let's quickly create an icon here, q-icon, and then we'll set the name of this icon equal to book, save it, and that's going to work because the icon library is already included. Now to see what icons we have available.
The Quasar team actually built an app for this. app, open up the left menu, select material icons, which is the one we get by default. And all of these icons are available out of the box without any extra setup. So for example, if I click on here again and search for, how about travel?
And then we come back, you'll notice that we have this travel explorer icon. So if we leave out the word matte and just say travel underscore explore, travel underscore explore, save it, jump back into our app, you can see that that's worked. Of course, there's a few other things we can do. We can change the size.
We've got extra small all the way through to extra large. And we can also give it pixels like 90 pixels, or you could say like 5em. There's all sorts of different ways that you can size this. And of course, we can change the color.
So let's set that equal to orange dash nine, or maybe blue. That might look a bit better. Yeah, there we go. So that's cool, but chances are you're going to want more flexibility with your icons.
And there's a few ways we can have access to more icons in Quasar. Let's open up our file browser and jump into the Quasar config file. And then I'll do control two to split this. And we're actually going to open that again because there's two parts of this config file I want to show you.
The first one is extras. And then the second one, we'll just run a search here, is icon set. So starting with extras. And you can think of this as icons and font libraries that Quasar can include and set up for you.
So this is a great dev experience because all you have to do is comment out the library you need and then you can go ahead and start using it. We can see here we get material icons and the Roboto font library by default when we install Quasar. Now notice if I comment this out, save that file, a lot of these icons just aren't working anymore, including some of those icons inside of the table. So if we comment this back in again, make sure we've got that comma.
Once again, it's working. So that's extras. These are all different icon libraries that we can just include by commenting those lines in. So what about icon set?
What's this all about? Well, this is a way of telling Quasar how to find icons within its components. So for example, Quasar has got a couple of icons here. It's got a left and a right arrow.
In order to find that icon, it needs to have some information and that's what the icon set is. By default, That's material icons. So it's commented out, but this is actually set to material icons by default behind the scenes. And it works because we've also got that library inside of extras.
So let's comment that in now, save it. And that doesn't change anything. It just means we're being explicit now. But what if I don't want Quasar to use material icons?
Well, in that case, we can use MDI version seven. In fact, this is the library that I use for my projects because it's a large Material Design icon library. So it usually has just about everything I need. On that case, we can paste that in here, MDI version 7.
And if we save it, it doesn't actually work by default. Notice that all of those buttons have now disappeared. And that's because we're saying, hey, Quasar, this is how I want you to find the icons for your components. But that icon library isn't included.
So what we also need to do here, is commented out inside of extras. Give that a moment to reload. And now these icons are actually being pulled from the MDI version 7 library instead. They might look pretty much the same, but these are actually different icons because they're now being pulled from this different library.
Now, just because we're playing around, I'm also going to comment in the font awesome version 6 library and then jump into the index page. So let's close that out, close this out, and we're back in the index page. Now each icon library has its own conventions for how you use that icon. And in order to find that, we can jump into the docs and then run a search here.
Should be able to find it with icon API. There we go. We'll jump in there. And if we scroll down a little bit, it's going to tell us the conventions for using these icons.
So I'm going to look for font awesome. Here we go. Font awesome version six. We can say FA.
And then we have a choice between solid, regular, and brands, and then fa dash the name of the icon. And we have a useful example here. So let's go ahead and copy that, throw that on the left side of the screen, jump back into our app, set the icon to that, and now it works. So that's a good thing to know.
They've got slightly different naming conventions. We also enabled the MDI library. So let's try one of those. MDI dash book.
And it works. Now, there's actually a second way to use icons in Quasar. The way that I just showed you uses web fonts. And the problem with web fonts is that they include all the fonts in the library.
This means the user has to download the entire library when they visit your site. js, when the user visits this site, they download this icon library, this icon library, the Roboto font, and the material icons library. That actually turns out to be a huge file size. Now, if you're just using one icon library, like material icons, that's probably not such a big deal, especially when you're prototyping.
However, there is a better way. It just takes a tiny bit of extra effort. And that other way is using SVG icons. This basically allows us to import icons on the fly as we need them.
So I'm going to go ahead and save that. And now we can see that a lot of these icons have disappeared. Jumping back into the index page, how can we now use the MDI book icon? Well, if we scroll up here, we can say import, we'll make this an empty object, and then we'll say from at quasar slash extras slash, and that gives us an idea of all of the extras that quasar offers by default.
So most of these are going to be icon libraries. And the one we're going to pull from is MDI version seven. A lot of these other ones are just here for backwards compatibility. We're interested in MDI version seven.
Now we can come in here, press control space and autocomplete is going to show us all of the icons that we've got available inside of that library, which is pretty cool. So often when I'm searching for icons, especially when I want to move really quickly, I'll just do this and search for something like book and then go, yeah, MDI book alphabet. That's the kind of thing I'm looking for. And now we can copy this, come down and in name, we actually add a colon here and then just pass it the icon.
And there we go. It works. It's kind of interesting to see what this looks like behind the scenes. So if you put a pre-tag in there, and we just smack in the icon, you can see that it's basically just the coordinates for an SVG.
That's all we're doing. We're just giving it the coordinates and then Quasar uses that to draw the icon. Let's make this full screen, Control Shift I, and then actually take a closer look here. And there we go.
We can see it's an SVG with the path added in. All right. Throwing this back over here. Now, the only icon that our app is including are the ones that we import.
So rather than bringing in the entire library for MDI version 7, we've only imported this specific icon. How cool is that? We now have a smaller file size. And honestly, I think this is a better dev experience as well, because it makes it a little bit easier to find icons on the fly.
However, you might have noticed that these buttons aren't showing up anymore. So why is that? Well, let's show these two side by side again, looking for icon set here. It's saying I want to use the MDI version seven library, but since it's not included anymore, it doesn't know how to find that icon.
It turns out Quasar has a solution for this. So if I get rid of that value and then do control space, you'll notice that we also have an SVG version of all of these icon libraries. So let's look for SVG. MDI version seven.
Now this is going to make sure that Quasar only imports the icons that it needs for all of its components. So we still end up with a small file size, but now Quasar knows how to find all of the icons that it needs. So let's go ahead and save that. And you'll notice that these icons come back in for that table.
This is how I like to build apps. I like to import my icons on the fly. And if you'd rather use something like Iconify, that is something that we'll cover later on in this series when we talk about UNO CSS. To finish up, I'm going to comment out material icons.
So the only extras we're importing is the Roboto font. This means we'll end up with a much smaller file size. But notice we lose this menu icon and we also lose this person icon. So let's jump into the main layout so that we can fix up those icons.
It'll give us a good chance to import the icons and get a feel for how this works in the real world. Closing out these files, opening up the file explorer, source, layouts, main layout. So that's the skeleton of our app. And then here where it says person, for the MDI library, I believe it's something like MDI account.
And look at that, we get auto completion with our icons, which I think is pretty cool. So that one's been fixed. and we need the menu one as well. So let's scroll up a bit here and there it is.
We'll change that to MDI menu, save it and we're done. By the way, notice that I did import those icons. So I was pressing tab and we can see that they're imported at the top here of the file. So I hope you enjoyed this one.
That's how we can use icons with Quasar. And again, later on in this series, we are going to talk about how you can use Iconify. if you really want that extra tapestry of icons to choose from.