Add custom icons

[jerome_fr]

Hello,

@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

[sarahsga]

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

[backwardm]

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)

[scottier]

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!

[sbickle99]

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.

[RuiBarbosa]

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?

[shaileshgupta]

@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.

[shaileshgupta]

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.

[Noah_T]

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!

[davyzhang]

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

[davyzhang]

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

Anyway to custom the tabbar's icon with my own svg file?

Nice job I went for another solution by building and extending ionicons with my own svg files but css approach seems easier as long as there’s only few icons need to be customised here’s the long thread https://forum.ionicframework.com/t/add-custom-icons/559/29

[Sakujo]

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.

[nmckeown]

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

[nmckeown]

see my post below for solution:

Ionicons and Icomoon

Just posting the fix for the above as I figured it out. The content attribute for the css is incorrect. On IcoMoon site, hit “<> Get Code” under the icon. Then copy this to ionic.app.css or style.css. .ion-wink:before { content: "\e9e8"; font-family: "teaze"; } Works a charm and easy way to add icon fonts to your app without messing around with the ionicon library