Add custom icons

ionic-v1
29

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