Ready for some cool Bootstrap icons?
Sure you are. And you can add them to your Angular project in a jiffy.
In this guide, I'll show you how to do just that.
When you're all done, you'll show off some icons that look like this:
And more. Bootstrap offers more than 1,300 icons (as of this writing) that you can include in your application.
Note: this article is part of a series of tutorials on how to create an admin console using Angular and Bootstrap. Feel free to check out the whole thing if you want to follow from the beginning. Just remember that the articles are sorted by date in descending order so the first article is actually the last.
You can follow along here or take a look at the code on GitHub.
Messing About With a Module
Start by installing the Bootstrap Icons module.
Head over to a command prompt then navigate to the root of your project source. Type this command:
npm i bootstrap-icons
That's going to install the module for you. It will take a little bit of time so wait for things to settle.
And when it's done, you're not done.
Surrender to the Style
It would be nice if you could just install the module and then start using the icons.
And, truth be told, you can do that if you're interested in doing everything with inline SVG. But that makes your code hard to read.
I mean, look at this:
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
I've done that before. But I'm not proud of it.
I think you'd much rather go with something that looks like this:
That's quite a bit cleaner, isn't it?
Well if you want to go that route, you'll need to make an update to your styles.scss file. Add this line:
That's going to add the stylesheet from the module you imported into your own stylesheet.
By the way: that bootstrap-icons file is really bootstrap-icons.css. The SCSS @import statement is smart enough to add the file extension.
You can navigate to that file in your operating system if you're interested. Your IDE might not show the node_modules directory, though.
Start Using It
Now you can add icons to your UI!
Here's some code I use in a vertical menu:
<span><a href="/" class="link-dark"><i class="bi bi-house-door"></i></a></span>
That displays a house icon and makes it a clickable link.
And yes, it's the Home menu item you see above.
You can see the whole HTML block here:
<li class="nav-item"> <div class="basic-item text-start rounded"> <span><a href="/" class="link-dark"><i class="bi bi-house-door"></i></a></span> <span class="menu-item-text"><a href="/" class="nav-link link-dark">Home</a></span> </div> </li>
Just keep in mind if you want to display an icon next to some text like you see in the example above, you'll have to put everything in a flexbox. Otherwise, the icon will appear on a separate line.
You can check out the styling I'm using for the vertical menu here.
Wrapping It Up
That wasn't too difficult, was it?
Now follow the instructions above to add Boostrap icons to your own Angular project. Then wow your users with an enhanced UI.
Photo by SHVETS production from Pexels