Add custom icons

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-

  1. Put all the files (ttf, eot, svg, woff) in the fonts folder in the Ionic app lib folder.
  2. Added the correct css to ionic.css as per the details in the .svg
  3. It didn’t work.
  4. I created a new url ref, aping the Ionicon .eot one. Didn’t work.
  5. I created the whole url ref for the whole lot.
  6. 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

Hello,

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

<i class='icon your-app-[icon-name]></i>

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 export your font. Include the font files (.ttf, etc) in your www/lib/ionic/fonts or www/fonts directory, whichever you prefer, and update the reference to that path in the .css file that you downloaded from Fontastic. For example:

    @font-face {
  font-family: "te-font";
  src:url("../lib/ionic/fonts/te-font.eot");
  src:url("../lib/ionic/fonts/te-font.eot?#iefix") format("embedded-opentype"),
    url("../lib/ionic/fonts/te-font.woff") format("woff"),
    url("../lib/ionic/fonts/te-font.ttf") format("truetype"),
    url("../lib/ionic/fonts/te-font.svg#te-font") format("svg");
  font-weight: normal;
  font-style: normal;

}

CAVEAT though, this was working perfectly until this this week when, after updating my iPhone to ios9, the font icons are having a “one-off” issue…in that every icon is displaying the NEXT icon in the file, not the correct one. Found this post while searching for an answer, but thought I’d pay it forward and contribute about Fontastic. If anyone has any idea what could be causing that mapping issue, please throw me a bone!

I use the following instructions to add custom vector images to the existing ionicon icons.

It works every time but PLEASE BACKUP YOUR PROJECT FILES FIRST.

I figured it out by using the link from above (http://blog.ionic.io/building-ionicons/).

Start by creating a backup of your project

Create a new ionicons.svg file

  1. Open the folder /www/lib/ionic/fonts in your project.
  2. Open the file ionicons.svg in your text editor.
  3. Remove all instances of the text ‘ion-’.
  4. Save the file.

Import ionicons images into Icomoon

  1. Open https://icomoon.io/app
  2. Click the Import Icons button.
  3. Find and open the ionicons.svg file that was created in the first steps.
  4. Click the Import Icons button again and import your images. I use flaticon.com to find a lot of the images I use in my applications. I like to use files of type svg.

Create new font and style files in Icomoon

  1. Click the menu button icon in the upper right corner of your newly created set.
  2. Find Select All and select it.
  3. Do the same for all sets, including the Ionicons set.
  4. Click Generate Font using the bottom bar.
  5. Click the Preferences button on the top bar.
  6. Change the Font Name to ionicons.
  7. Change the Class Prefix to ion-.
  8. Click outside of the window (not X) to close the Preferences window.
  9. Click the Download button on the bottom bar under Font.
  10. A new zip file will be downloaded.

Copy new files to Ionic project

  1. Unzip the file that was created in the previous step.
  2. Copy the files under the fonts folder to the fonts folder (/www/lib/ionic/fonts) in your project.
  3. Copy the style.css file to www\lib\ionic\css in your project.

Edit the new ionic.css file
4) Edit the style.css and original ionic.css file (/www/lib/ionic/fonts) in a text editor.
5) Search for the word Resets in the ionic.css file. It’s found just below the last css entry for the ionicons.
6) Copy everything below the commented section where Resets is located.
7) Paste the text to the end of the style.css file.
8) Go to the top of the style.css file.
9) Under @font-face there are four or five entries for url().
10) Replace all locations where it shows ‘fonts/ioncons’ with ‘…/fonts/ioncons’
11) Make a backup of the ionic.css file and then replace it with the style.css file.
12) Rename the style.css file to ionic.css.

Done. Your new icons should be available and you still have access to all of the Ionicons.

Hello, everyone.

I’m trying to use SVG symbol definitions, or inline SVG, instead of font icons, because I want to be able to reuse the same icon with different colors and maybe implement some animation.

I’m not having any compatibility problems with this technique, but I’m starting to wonder:

  • Is there any performance problems with this implementation? Why did you choose SVG font icons instead?

@sbickle99 thanks. It works. However, I have only one issue. My new icons are smaller in size than ionicons. Looking for how to fix this.

There was some issue with my svg files. Fixed them and it all works like a charm.

You are a real lifesaver sir! Just curious to know how did you find this hack? I also tried reading the generator file in ionicons github repo, but couldn’t find the solution.

I’m sharing my experiences here for anyone else who’s using sass. It makes the process slightly different.

Follow the great steps from @sbickle99 for Create a new ionicons.svg file, Import ionicons images into Icomoon, and Create new font and style files in Icomoon.

This is where I had to change things. This is an example for adding one new icon named “apple.”

  1. Go to yourProject/www/lib/ionic/fonts and open the ionicons.svg file
  2. Find the glyph name (in this case, “apple”). Take note of the glyph name and the unicode number next to it. For the unicode number, you’ll need the three digits to the right and the letter immediately adjacent to it. In my case, &#xe900 turned into e900.
  3. Go to yourProject/www/lib/ionic/scss
  4. In _ionicons-variables.scss add a variable for your new icon like this:
    $ionicon-var-apple: “\e900”;
  5. in _ionicons-icons.scss add these two lines:
    .#{$ionicons-prefix}apple:before,
    .#{$ionicons-prefix}apple:before { content: $ionicon-var-apple; }
  6. Make sure sass recompiles: ionic setup sass (or another way, if you know how)
  7. You can now use ‘ion-apple’ like any other ionic icon.

This is obviously a little tedious if you have a substantial number, but it works for a smaller number of additions.

A gulp task or something would probably help if you had to do a large number of these.

Hope this helps someone!

1 Like

Thanks so much for your solution.

Here is a way to do in ionic2

  1. create a ionicons pack like @sbickle99 's step
  2. backup and remove all the ionic font file started with ionicons.* under node_modules/ionic-angular/fonts, then copy your extended verion to the fonts directory
  3. edit the scss file under node_modules/ionicons/dist/scss/ionics-icons.scss carefully override the similar content in style.css just downloaded.

By doing this, gulp will copy the fonts from ionic dir to build/fonts directory, and them compile the scss file from ionicons/dist to build/css

The drawback is that all of this will be overwritten if you update your project, and have to do it again. To avoid this problem, you can modify the gulpfile.js and add a task to overwrite the font file and scss file with your own file somewhere like: app/theme/fonts

since ionic2 is in beta right now I don’t think modify gulpfile.js is worthy

2 Likes

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

Ty Noah_T and sbickle99!

@Noah_T
I’ve done as you suggested to use my custom icon the sass way, but all i see is just a rectangle. Any ideas?

SOLVED: I had added these lines:

.#{$ionicons-prefix}apple:before,
.#{$ionicons-prefix}apple:before { content: $ionicon-var-apple; }

at the end of _ionicons-icons.scss, but that wasn’t right. The comma was an error i guess. Plus .#{$ionicons-prefix}apple:before, has to be in the first part of _ionicons-icons.scss and .#{$ionicons-prefix}apple:before { content: $ionicon-var-apple; } has to be in the second part of _ionicons-icons.scss.

Hi there,

I am trying to do the same thing but all its displaying is an exclamation mark icon!

I added the font files from icomoon to my fonts folder.

\www\assets\lib\ionic\fonts

my test glyph is called wink

I then updated www\assets\css\ionic.app.css

@font-face {
font-family: “icomoon”;
src: url("…/lib/ionic/fonts/icomoon.eot");
src: url("…/lib/ionic/fonts/icomoon.eot") format(“embedded-opentype”),
url("…/lib/ionic/fonts/icomoon.ttf") format(“truetype”),
url("…/lib/ionic/fonts/icomoon.woff") format(“woff”),
url("…/lib/ionic/fonts/icomoon.svg") format(“svg”);
font-weight: normal;
font-style: normal; }

.wink:before

.wink:before {
content: “”; }

HTML Code:

<button class="button button-full button-assertive button-larger wink"
               style="margin-top:20px;font-size:90px;border-radius:15px;font-family:icomoon;"
               ng-click="flirt.sendTeaze(flirt.uid,flirt.muid,'flirt','')">
            </button>```

Any idea where I am going wrong or is this approach even doable.
Appreciate any assistance. Thanks

see my post below for solution: