Ionic 4 - Custom icons broken compared to v3 #998
Description
Stencil version:
C:\ae\adaept.com\aetabs>ionic info
Ionic:
ionic (Ionic CLI) : 4.0.3 (C:\Users\peter\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.1
@angular-devkit/core : 0.7.2
@angular-devkit/schematics : 0.7.2
@angular/cli : 6.1.2
@ionic/ng-toolkit : 1.0.2
@ionic/schematics-angular : 1.0.3
System:
NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 6.2.0
OS : Windows 10
C:\ae\adaept.com\aetabs>npm list @stencil/core
[email protected] C:\ae\adaept.com\aetabs
`-- (empty)
C:\ae\adaept.com\aetabs>
I'm submitting a:
[x] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/
Current behavior:
Custom icons could be used in Ionic 3.
The same process does not work in Ionic 4.
It seems that i4 is locked into using ionicons only
for the new stencil component.
The md- and ios-appear to be forced thereby overriding
any custom attribute.
Expected behavior:
Custom icons should be supported and a clear explanation provided
for migration from i3 to i4.
Steps to reproduce:
Related code:
Ionic 3 demo: https://aeicons.adaept.com/
Repo: https://github.com/peterennis/aeicons
Ionic 4 demo: https://aetabs.adaept.com/tabs/(contact:contact)
Repo: peterennis/aetabs@6b032dc
Tested using global.scss and page specific contact.scss but it does not
work in either case.
Other information:
The history of this method is in this thread:
https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36
Implementation and explanation:
https://golb.hplar.ch/2018/01/Custom-SVG-icons-in-Ionic.html
Related issue: ionic-team/ionicons#589