Ionicons: Missing outline icons in v4 (upgrading from v3)

[tgangso]

Missing some important (for my app) ion icons when upgrading from v3 to v4

ios-water-outline
ios-flask-outline
ios-color-palette-outline

Might be more, but these i would like to see added back in, thank you.

[battika]

or information-circle-outline

[slootmaekersdirk]

Please Also add the following :
ios-checkmark-circle-outline
ios-help-circle-outline
ios-bug-outline
ios-close-circle-outline
ios-call-outline
ios-mail-outline
ios-backspace-outline
ios-wifi-outline
ios-grid-outline
ios-person-outline
ios-unlock-outline
ios-camera-outline
ios-clock-outline

thanks

[blackinitial]

up, bring outline icons back again

[Unkn0wn0x]

Just for the case, you are not binded to the v4 of the Ionicons, simply downgrade to v3 where the outline Icons are still available.

Maybe it helps someone.

[Bengejd]

The biggest issue with going with the older version of ion-icons, is that you lose out on the optimizations that were done with v4 of the ion-icons. Namely that they are now SVG's and have the ability to only load the Icons that you use, instead of downloading the entire bundle of 700+ icons on app paint.

I am unsure whether they will be bringing back a lot of the outline icons. There was an issue a while ago where you could add the icons that you wanted to have them bring back, but I can't find it now... it would be a shame if they don't, as some of them look a lot better than their non-outline variants. The biggest that I've encountered so far, is the camera camera-outline and reverse-camera-outline respectively.

[blondie63]

I don't understand if Ionic Team want to fix this issue...

[Sushil1091Jes]

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

[captainjim1]

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

That is literally the only icon with the empty suffix in the entire library.
source: https://github.com/ionic-team/ionicons/tree/master/src/svg

[AlTaRhuNi49]

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

saved my day thanks :)

[captainjim1]

Original v3 icons can be viewed at the following URL:
https://ionicframework.com/docs/v3/ionicons/

Adding custom icons to your ionic-angular project isn't very difficult using https://icomoon.io/app

You basically create an icon set out of their icon sets or images you upload, download the generated font file, then configure your project to use the new font and hook it into your icon set with some SASS.

My application has 5 custom icons and my app.scss and has this bit of code in it...

@import "ionicons";

/*
Use a custom IcoMoon icon set with ionic - must register the individual icons desired below
To update the icon set upload /src/assets/fonts/icomoon.svg to the icomoon.io app
https://icomoon.io/
 */
@font-face {
    font-family: 'icomoon';
    src:  url('../assets/fonts/icomoon.eot?lrdjr3');
    src:  url('../assets/fonts/icomoon.eot?lrdjr3#iefix') format('embedded-opentype'),
    url('../assets/fonts/icomoon.ttf?lrdjr3') format('truetype'),
    url('../assets/fonts/icomoon.woff?lrdjr3') format('woff'),
    url('../assets/fonts/icomoon.svg?lrdjr3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
    @extend .ion;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.add-to-sl:before {
    content: "\e900";
    color: #999;
}
.added-to-sl:before {
    content: "\e901";
    color: #009534;
}
.fav-media:before {
    content: "\e902";
}
.shopping-list:before {
    content: "\e903";
}
.fav-media-folders:before {
    content: "\e903";
}

[ion-fixed] { width: 100%; }

@mixin makeIcon($arg, $val) {
    .ion-ios-#{$arg}:before ,
    .ion-ios-#{$arg}-circle:before ,
    .ion-ios-#{$arg}-circle-outline:before ,
    .ion-ios-#{$arg}-outline:before ,
    .ion-md-#{$arg}:before ,
    .ion-md-#{$arg}-circle:before ,
    .ion-md-#{$arg}-circle-outline:before ,
    .ion-md-#{$arg}-outline:before  {
        content: $val;
        //font-size: 26px;
    }
}

@include makeIcon(add-to-sl, '\e900');
@include makeIcon(added-to-sl, '\e901');
@include makeIcon(fav-media, '\e902');
@include makeIcon(shopping-list, '\e903');
@include makeIcon(fav-media-folders, '\e904');

After that you can use your custom icon using your provided name just like every other ionicon

<ion-icon name="add-to-sl"></ion-icon>