Ionicons: How do I get the outlined Icons back?

[muuvmuuv]

I use the font icon set with <i class="icon ion-ios-chatboxes-outline"></i> but I do not see anything. When I remove the -outline the icon appears.

Do I have to add something else?

[Nicolaidavies]

@muuvmuuv It seems the -outline icons aren't in ionicons v4.

A search on ionicons.com v4 for "cog" only returns one cog icon and not two as in version 3.

I'm guessing they are moving away from using the -outline styled icons for version 4 of ionic.

[muuvmuuv]

Sad to hear. But it would be very nice to have them! Because I‘m missing some company logos in v3 and I don‘t want to use a ‚older‘ Version. Maybe they can add a generator. So we can compile them by ourself?

_{Sent with GitHawk}

[daniele-orlando]

-outline variant is a _Must Have_ for a serious icon pack.

I'm moving to Material Icons project until the outline variants are restored.

[muuvmuuv]

Fixed it by installing npm i ionicons-npm (https://github.com/DominicTobias/ionicons) old v2 icon pack. Then I added this into my scss:

// Ionicons v2 custom

@import '../../../node_modules/ionicons-npm/scss/ionicons-variables';
$ionicons-font-family: 'IoniconsV2'; // added `V2` at the end
$ionicons-prefix: ion-alt-; // added an alt suffix to the prefix

@font-face {
  font-family: $ionicons-font-family;
  font-style: normal;
  font-weight: normal;

  // Added a `-v2` suffix
  src: url('#{$ionicons-font-path}/ionicons-v2.eot?v=#{$ionicons-version}');
  src: url('#{$ionicons-font-path}/ionicons-v2.eot?v=#{$ionicons-version}#iefix') format('embedded-opentype'),
  url('#{$ionicons-font-path}/ionicons-v2.ttf?v=#{$ionicons-version}') format('truetype'),
  url('#{$ionicons-font-path}/ionicons-v2.woff?v=#{$ionicons-version}') format('woff'),
  url('#{$ionicons-font-path}/ionicons-v2.svg?v=#{$ionicons-version}#Ionicons') format('svg');
}

.ion {
  display: inline-block;

  font-family: $ionicons-font-family;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;

  line-height: 1;

  text-rendering: auto;
  text-transform: none;

  speak: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@import '../../../node_modules/ionicons-npm/scss/ionicons-icons';

[AlirezaAkbarix]

I'm waiting for owners, members or contributors response!

What can we do for having outline icons?

[tgangso]

Please bring in outline icons, breaking change if you ask me.

[muuvmuuv]

Related to #604

[BillyFigueroa]

Has an official response been given to why this was removed? These are the cleanest, best looking icons on the entire set. All of the non outline ones look "thicker" and "bulkier". I think many more people will complain about this as they update

[muuvmuuv]

@BillyFigueroa sadly no...

_{Sent with GitHawk}

[BillyFigueroa]

@muuvmuuv meaning, they have not given a reason as to why?

[muuvmuuv]

@BillyFigueroa not from official sources/contributors/members etc. I don't even know if this repo is really active. Currently, they develop a lot on their main repo, I think we just need to wait until they have more resources to dive into subprojects. But I might be wrong. I'm using ionicons-npm as a workaround and include it with SCSS:

ionicons.scss

@import "~ionicons-npm/scss/ionicons-variables";
$ionicons-font-path: "/root/fonts";
$ionicons-font-family: "IoniconsOld";
$ionicons-prefix: "ion-old-";

@import "~ionicons-npm/scss/ionicons-font";
@import "~ionicons-npm/scss/ionicons-icons";

fonts do I import with NPM-scripts:

{
  "scripts": {
    "fonts": "cp -R ./node_modules/ionicons-npm/fonts/* ./fonts", // => macOS
    "postinstall": "npm run fonts",
  },
}

[BillyFigueroa]

@muuvmuuv thanks. I can't really do this work around. I m working with Expo (React Native)

[MiguelSyll]

I am migrating my App to Ionic version 4 (V4) end I can not find the outlined Icons. I have to change all icons in my App and I do not find some icons as well. Shouldn't it be easier to migrate to V4? All Styles where changed, Side Menu, Routing... and Icons... what will come for version 5? Please add the older icons.

[ericdesa]

ionicon v4 accept custom SVG, so you can download the missing one from the V3 branch and use it like this:
<ion-icon src="/path/to/external/file.svg"></ion-icon>

source: https://ionicons.com/usage

[youssmak]

A simple solution :

1. npm install git://github.com/ionic-team/ionicons.git#3.0 --save
2. edit assets array in angular.json file to include the new ionicons v4 path, and the outlined icons coming from the v3 branch

{
    "glob": "**/*.svg",
    "input": "node_modules/@ionic/core/node_modules/ionicons/dist/ionicons/svg",
    "output": "./svg"
},
{
    "glob": "**/*-outline.svg",
    "input": "node_modules/ionicons/dist/svg",
    "output": "./svg"
}

[Sushil1091Jes]

replace outline with empty. for eg:ios-heart-outline ---> ios-heart-empty

[joshuapinter]

replace outline with empty. for eg:ios-heart-outline ---> ios-heart-empty

[fengerzh]

What's wrong? Is there any copyright legal issue? Please explain, not just ignore. Thanks!

[youssmak]

Might be only a question of priorities ;)

[sunsgs]

https://github.com/ionic-team/ionicons/tree/master/src/svg i can see the outline icons....

[jefflester]

Any updates on this?

[obedm503]

@jefflester [email protected] released with -outline variations https://ionicons.com/

[RohitPPednekar]

You can just download the .SVG icon from https://ionicons.com/ so it could be any outline or filled or shape and after downloading (example : home-outline.SVG) move it to Your_Projectnode_modulesioniconsdistioniconssvg directory... and then you are Ready To Use it ... i tried and it displays the icons !

[Ahhsan]

@RohitPPednekar If we load that way, we can' use the css styles like color, size etc..