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)?

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 ;).

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…

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 ico…

I’ve come up with my own simple solution to add a custom icon. Take a look at this thread for more information! [image] Tutorial - Create custom icons, the easy way tutorials Hi guys When I developped my own app with Ionic, I had the need for some custom icons. The foru…

Nice tool in case you need to generate individual SVG files for each icon: https://www.npmjs.com/package/font-blast

Your HTML with Navs <li> Analyze </li> <li> + </li> <li> 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; l…

Hello, [image] daniel: @ben actually wrote a quite nice and interesting article about their process of designing the icons with iconmoon: Building Ionicons, Our Open Source Icon Font - Ionic Blog A lot of pictures are down in this article :frowning:

could you please explain the grunt part. I do not understand where you added that code snippet. Thanks

The tutorial by Omer (linked above) works well still… (as of Sept. 2015). One thing you have to be careful of is using a version of sass below 3.4.x as that version weirds out the escaping of unicode characters. I used version 3.2.19 and the process went smoothly (albeit manually)

I’ve used Fontastic which allows you to namespace your new icons, so that you can use to show your custom icons alongside ionicons. It’s all very easy and free on their site to upload your svg files, or choose from a ton of existing libraries, and then exp…

Add custom icons

ionic-v1

davyzhang March 17, 2016, 3:47pm 31

A css approach, nicer and easier. thanks to @crkvend

Topic		Replies	Views
Extend ionic / add custom fonts/icons (ionic.config.json) ionic-v3	35	41867	June 27, 2017
Anyway to custom the tabbar's icon with my own svg file? ionic-v3	59	52662	January 28, 2020
How to add custom font icons in ionic2 ionic-v3	0	840	April 25, 2016
Add custom SVG to ionicons for buttons ionic-v1	1	1174	November 15, 2017
How to add custom icons to ion-icons in ionic-v4 Ionic Framework	2	14822	February 15, 2020

Add custom icons

Related topics