Like the rest of Ionic in Ionic 4, Ionicons has recently received the web components treatment. If you’ve used Ionic in the past, then you have likely used Ionicons which provides all of Ionic’s icons. Adding a range of well-designed and platform consistent icons is as simple as dropping the following into your project:
<ion-icon name="icon-name"></ion-icon>Ionicons is built into Ionic, but you can also use Ionicons as a standalone library in non-Ionic projects if you want to. The Ionic team has just released version 4.1 of Ionicons, which includes some cool new features. The three key changes that have now been implemented into Ionicons are:
- The icons are now provided as web components
- They now use the Intersection Observer API to only load icons when they become visible on the screen
- You can now easily supply your own custom SVG to use with Ionicons
The performance benefit of only loading visible icons is something you get for free, but in this tutorial, I am going to walk through how we can implement our own custom icons when using Ionicons.
1. Installing Ionicons
If you are using Ionic then you do not need to worry about installing Ionicons, as it is built-in by default. In order to integrate Ionicions into a non-Ionic project you just need to include the following script:
<script src="https://unpkg.com/ionicons@4.1.1/dist/ionicons.js"></script>IMPORTANT: If you are using the script above to add Ionicions to a non-Ionic project, make sure you are including the latest version (this example uses version 4.1.1, which is the latest at the time of writing this).
2. Creating an SVG to use with Ionicons
We’re going to quickly cover how you would go about creating your own SVG to use with Ionicons. Of course, you don’t have to create it yourself, as long as you have the rights to use it you can use any SVG you would like. This makes icons in Ionic infinitely extensible, because there are already so many professionally designed SVG icons available, and you can easily use any of those with Ionicons.
If you do intend to create your own SVG icon, then you will need to know a little bit more about what an SVG actually is. An SVG is just an image defined in the SVG file format, which stands for Scalable Vector Graphics. The difference between vector based graphics and raster (pixel) based graphics, is that vector graphics are defined mathematically and can be scaled to any resolution without losing quality. SVGs are defined by using an XML format that looks like this:
<svg width="100" height="100">
<circle
cx="50"
cy="50"
r="40"
stroke="green"
stroke-width="4"
fill="yellow"
/>
</svg>This is a simple SVG for a circle in the documentation provided by W3Schools. This would create a yellow circle with a green outline. The center of the circle would have an x-coordinate of 50, a y-coordinate of 50, and a radius of 40. It’s important to understand that these are coordinates, this SVG is not a circle with a radius of 40px inside of a 100px container. This format more generically defines the shape of the image you are creating, this SVG could just as easily be scaled up to 20000px. The sizes change but the overall shape stays the same, and we have all the information required to display this image with 100% clarity at any size.
You could code the SVG manually using elements like <circle>, <line>, and <path>, but for more complicated vector graphics it becomes quite hard to create the image you want by writing the code yourself. Therefore, most people will use an image editing program to create the SVG for them.
One program commonly used to create vector images is Adobe Illustrator, but there are also other alternatives. In your program of choice, you will need to create your vector image and then save it in the SVG file format. For a walkthrough of creating an SVG in Adobe Illustrator you can watch this video that I filmed a while ago to demonstrate:
NOTE: Just focus on the first part of the video that walks through the creation of the SVG, the rest of the video is irrelevant to this tutorial and uses an older version of Ionic.
3. Using an SVG with Ionicons
Once you have your SVG, using it with Ionicons is extremely simple. First, make sure that you place the SVG somewhere in the assets folder for your application. If you are not using Ionic then it does not necessarily have to be in the assets folder, it will just need to be in some kind of static resources folder that you can reference from your templates.
Once you have done this, all you need to do is use the standard <ion-icon> component, but reference the path to your custom SVG:
<ion-icon src="/path/to/icon.svg"><ion-icon></ion-icon></ion-icon>In the example I created for this tutorial, my <ion-icon> looked like this:
<ion-icon src="/assets/test.svg"></ion-icon>You can then treat your icon like any other <ion-icon>, for example, you could specify the size:
<ion-icon src="/assets/test.svg" size="large"></ion-icon>or you could change the size to whatever you like by styling this element with a font-size property:
font-size: 200px;Just like the normal Ionicons, it won’t matter what size you make your icon – it will still display with perfect clarity. This is what the icon I tested looked like once added to an Ionic application:
and the cool thing about SVGs is that you can even modify all or part of the SVG using CSS styles. So, I could easily modify the fill property of the paths in this icon to be black and pink instead:
You can also take this concept a lot further, e.g. you can even animate your SVGs.
Summary
In the past, supplying your own custom icons was a little bit of work, but now it is about as easy as it possibly could be. Not only are we able to ealazily supply any SVG we like to use as an Ionicon, we also get the added benefit of lazy loaded icons that only load as they become visible on the screen.