Is there a recommended way to add icons? I would like to extend the ionicons font (which are really great btw) with custom svg paths. Is that possible (via grunt maybe?) or do I have to use my own method (icon sprite etc)?
Have you hear of Iconmoon? Its a web based way to make your own icon packs. Its pretty good and they will generate the css and font files for you. Its not a grunt process but it can provide a good way to create your own icon pack and keep them separate from the default set
1 Like
Thanks for the hint, i’ll give it a try!
Also if you’re looking for a process that involves grunt, you could always mess around with Ionicons and report back if it works or not. It does come with a grunt build process but I just haven’t had a chance to use it
@ben actually wrote a quite nice and interesting article about their process of designing the icons with iconmoon: http://ionicframework.com/blog/building-ionicons/
1 Like
@daniel that really is a nice article. i just tried to do it like ben did with IcoMoon and as @mhartington suggested and i have to say it’s really easy and solved my problem.
my initial problem was to add custom icons to my tab bar but with the given syntax icon="ion-navicon". after generating my own icon font called “tictic” at icoMoon, i was able to implement my own icons to the tab bar, just as i wanted. so my tab bar looks something like this:
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-light">
<tab title="Events" icon="ion-navicon" href="#/tab/events">
<nav-view name="events-tab"></nav-view>
</tab>
<tab title="Friends" icon="tictic-friends" href="#/tab/friends">
<nav-view name="friends-tab"></nav-view>
</tab>
</tabs>
in comparison to working with old school sprites, i takes some time to save every icon in a separate .svg file, upload, convert, download and implement. i’m really interested in a automated way. hence i’ll try some grunt plugins when i find some spare time and report my results here
yeeha, i think i’m in love with icon fonts 
as i hoped, it is possible to create or rather extend the given icon font ionicons without too much effort.
i used grunt-webfont. after installing the plugin and fontforge as described in the grunt-webfont doku and some hacking, it works perfectly fine. i just add my icons as svg files to a folder, execute grunt webfont and tada, i can use my icons the way i use ionicons. simple as that!
3 Likes
Great to hear that you found a nice grunt solution. Going to try this on my own projects!
Would you mind posting step by step what you did? i.e. what sag and css files were generated, and where you placed them in the directory.
I know this may be straightforward, but it’ll help us novices figure this out. Thanks!
Yeah sure, it’s been a while but I’ll try:
So what you need first are your custom icons as svg files. Due to my directory arrangement I save them to “www/style/icons/yourIcon.svg”.
Next I set up Grunt and the grunt-webfont module. As I expect you guys to be quite familiar with Grunt, I just post a quick extract of my config. If you need more explanation, let me know and I will write some additional lines.
Here it goes:
module.exports = function(grunt) {
grunt.initConfig({
...
webfont: {
icons: {
src: 'style/icons/*.svg',
dest: 'style/fonts',
destCss: 'style/less/fonts',
syntax: 'bem',
options: {
font: 'myFont',
template: 'style/less/fonts/myFont_template.css',
htmlDemo: false,
stylesheet: 'less'
}
}
}
});
...
grunt.loadNpmTasks('grunt-webfont');
};
Next thing you need to do is to set up your font css template. Now that’s the tricky part. Since I want to “extend” the great ionicons so I can use my own font in a very similar way, I couldnt just use the sample css template as it is delivered by grunt-webfont, but do some hacking. Here is what I came up with in the end: http://codepen.io/djaax/pen/xImjq?editors=010 (www/style/less/fonts/myFont_template.css" as the webfont.options.template above). I didn’t checked, if it’s still working with the beta as I only worked on alpha yet - sorry.
What else you need is a myFont_template.json file (www/style/less/fonts/myFont_template.json"), including this:
{
"baseClass": "icon",
"classPrefix": "myFont-",
"mixinPrefix": "myFont-"
}
That’s basically it. Now run the grunt webfont task and you’ll get your myFont.less (www/style/less/myFont.less) and your own font (www/style/fonts/myFonts-some_crypt_code_like_bh12jv3h1v23j.svg/.ttf/…).
Include the .less file in your html and use it like <span class="icon myFont-someCoolSvg"></span>". Yey 
I hope this helps you @dstsay. If not, let me know!
1 Like
Actually one of the easiest way to extend ionicons is to use our same build process, but modify what svg files are in the src folder in the ionicons repo:
2 Likes
Adam I’m trying to use ionicon to generate new icons but I’m getting this error:
generate_font.py line: 6 Undefined variable: import
You know how to solve?
@adam well, i think i’ve followed all the build-instructions in the README.md, and when i run the command to build from the (updated) manifest the output css and css.map files still include all the ionicons & not my specified prefix.
would love to get some more details here. thanks in advance.
1 Like
like @dstsay asked, could you please break down which files were altered and where they exist in the file structure?
1 Like
Guys, just read this blog post: http://www.omerwazir.com/posts/custom-icons-with-ionicons/ .
It’s a step by step tut so you could add icons to ionicons. CLI though, but i suppose that shouldn’t be a problem ;).
2 Likes
Oh this is funny.
I used Icomoon to create a single icon that is missing from Ionicons (all the rest are great for my app) and what I did was this-
- Put all the files (ttf, eot, svg, woff) in the fonts folder in the Ionic app lib folder.
- Added the correct css to ionic.css as per the details in the .svg
- It didn’t work.
- I created a new url ref, aping the Ionicon .eot one. Didn’t work.
- I created the whole url ref for the whole lot.
- It works! But… only for my icon. LOL.
This was relatively simple to do. What I really need to do is merge my tff, eot, woff and tff files with the Ionicon ones! I’m giving Font Forge a go at the moment. If it works this will be a really nice way to do it.
Edit: I followed some instructions on merging fonts with Font Forge. It didn’t work and ended up spoiling the Ionicons necessitating a new DL.
Solution!
I did the same as the previous post stated but I created a new font-face called MyFont, replicated the css for the Ionicons using my new name and there we go - both the Ionicons and MyFont icons work.
Using this method means it’s easy to add extra icons. Use icomoon to build your new icons.
Warning! My method gets overwritten when you update the CLI.
I’ve come up with my own simple solution to add a custom icon.
Take a look at this thread for more information!
Nice tool in case you need to generate individual SVG files for each icon:
https://www.npmjs.com/package/font-blast
1 Like
Your HTML with Navs
<li>
<span class="icon-pencil"></span>
Analyze
</li>
<li> + </li>
<li>
<span class="icon-paint-format"></span>Design
</li>
<li> + </li>
Your CSS Code:
section li:nth-child(even) {
color: #ededed;
width: 6%;
font-size: 2.5em;
height: 63px;
margin-top: 31.5px;
line-height: 63px;
}
section span {
padding: 15px 0;
font-size: 5em;
display: block;
color: steelblue;
transition: all .2s ease-in-out;
}
section li:hover span {
transform: translateY(-10px);
}
This is the actual Link – > Creating a Custom Icon Font with IcoMoon and Less
For Video Tutorials – > Check out this Link --> Custom Font Icon with IcoMoon