This tutorial will show you how to use custom icons within your Ionic 2 app.
Step 1
Gather your SVG icons and head over to https://icomoon.io. Here create a new icon pack and upload your custom svgs.
Once done download and extract the iconmoon.zip file and put the fonts inside src/assets/fonts/iconmoon/
Now create a new scss file inside src/theme/iconmoon.scss, make sure your paths to the fonts match up.
Include the following:
@font-face { font-family: 'icomoon'; src: url('../assets/fonts/iconmoon/icomoon.eot?3e91zf'); src: url('../assets/fonts/iconmoon/icomoon.eot?3e91zf#iefix') format('embedded-opentype'), url('../assets/fonts/iconmoon/icomoon.ttf?3e91zf') format('truetype'), url('../assets/fonts/iconmoon/icomoon.woff?3e91zf') format('woff'), url('../assets/fonts/iconmoon/icomoon.svg?3e91zf#icomoon') format('svg'); font-weight: normal; font-style: normal; } @mixin makeIcon($arg, $val) { .ion-ios-#{$arg}:before , .ion-ios-#{$arg}-circle:before , .ion-ios-#{$arg}-circle-outline:before , .ion-ios-#{$arg}-outline:before , .ion-md-#{$arg}:before , .ion-md-#{$arg}-circle:before , .ion-md-#{$arg}-circle-outline:before , .ion-md-#{$arg}-outline:before { font-family: "icomoon" !important; content: $val; } } @include makeIcon(icon-new-calendar, '\e904');
Step 2
Make sure to import the iconmoon.scss file in to variables.scss inside the theme directory.
Step 3
Now inside our .html files we can then apply the fonts by applying the class appropriately, eg:
<ion-tabs [selectedIndex]="selectedIndex" class="c-tabsnav"> <ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="icon-new-calendar,"></ion-tab> </ion-tabs>
Below are some custom icons that have been included in to an app I’ve been working on recently.
References:
Stack Overflow
LIFESAVER!
Thanks so much for this post!!
Jay
You are a day saver! Thanks mate!