Ionic 4: Custom Icons Made Simple
The standard ion-icon set is tremendous. But sometimes, it’s just not what you want it to be. Sometimes you want to add a particular icon from your designer, or just want to make a few alterations to an existing SVG and use that. Well if that’s the case, you’re in luck.
First off, we’ll need to alter the assets array in our angular.json file to include the following:
"architect": {
"build": {
...
"options": {
...
"assets": [
...
{
"glob": "**/*.svg",
"input": "src/assets/custom-ion-icons",
"output": "./svg"
}
]
...Next, you’ll have to create a version of the icon, for each platform that you are targeting. If you’re going to use IOS & Android, then you’ll have to create one for IOS and one for Android, even if they are the same icon. It’s won’t cause any package bloat though, since your icons will only be uploaded for their respective platforms.
I have mine in a folder called custom-ion-icons, but you can change that name and the angular.json file to reflect whatever you want it to be called.
Now, you’ll have to pick a SVG that you would like to use for your icon. I’ve uploaded one of mine on TinyUpload.com, just in case you don’t have one handy. Grab your icon, and put it in your custom-ion-icons folder.
Next, you’ll have to name them appropriately. Each version of the icon must be named with their platform name preceding the icon name. So in my case, my icons are named: md-camera-outline.svg for Android and ios-camera-icon.svg for IOS, respectively.
Test It Out!
Test out your new custom icon by throwing it inside of an ion-icon just like you would any other ion-icon:
<ion-icon name="camera-outline"></ion-icon>And that’s it! Check out some of my other articles for more useful solutions within the Ionic framework.
Questions?
You can find me on:
- GitHub: https://github.com/bengejd/
- Medium: https://medium.com/@JordanBenge
Who am I? My name is Jordan Benge, I am a Software Developer who loves helping others and contributing to Open-Source. I’ve been working in the Ionic Framework since Ionic 1, and have tried to keep up to date on the latest and greatest when it comes to Hybrid Mobile App Development.
