Create/Get icons in SVG format (e.g. FlatIcon)
Create and download icons-font using IcoMoon App
Extract only the font folder from the downloaded icomoon.zip archive to assets folder.
Create a new file in theme folder called _icomoon.scss with following content (thanks to Stackoverflow user):
// icomoon @font-face { font-family: 'icomoon'; src: url('../assets/fonts/icomoon.eot?ls340j'); src: url('../assets/fonts/icomoon.eot?ls340j#iefix') format('embedded-opentype'), url('../assets/fonts/icomoon.ttf?ls340j') format('truetype'), url('../assets/fonts/icomoon.woff?ls340j') format('woff'), url('../assets/fonts/icomoon.svg?ls340j#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; } } // Add such entries for each icon: //@include makeIcon(icon-balance, '\e900')
Import that file in variables.scss :
@import "icomoon";
Now you will have to write following line for each icon you want to use from your generated icon-font:
@include makeIcon(icon-<NAME>, '\e<NUMBER>') // Example: @include makeIcon(icon-balance, '\e900')
The NUMBER you will get from the icomoon.zip archive in style.css like:
.icon-balance:before { content: "\e900"; }
Now you can use your icons in the usual Ionic2 way:
<ion-icon name="icon-balance"></ion-icon>
Thanks bro,
Was searching for this and had hard time looking at stack-overflow.Did not say which files to change and where to place files.
You are welcome!
Thank you very much! It was very helpful.
you’re my new god!! Thank you so much!!
hey bro
I did the same way as your steps , but I got this error
[01:47:19] sass: src/theme/variables.scss, line: 7
File to import not found or unreadable: icomoon. Parent style sheet:
/Users/chrischou/Code/frontend/aerisapp-ionic-v2/src/theme/variables.scss
L7: @import “icomoon”;
L8: @import “summary”;
Hi, check if your filename of icomoon starts with an underline. It should be named: “_icomoon.scss”
thank you so much! I was searching from yesterday, was not able to locate place where to put this file.