Repository navigation
bug: Ionicons are not loaded in browser when ionic build --prod was given (V4) #18614
Description
I created an ionic app using CLI. and served the app using ionic serve, it worked perfectly. I tried to take browser build using ionic build --prod and run the index.html in www folder.
The app was ran successfully but the icons are not displaying. I checked the network tab and therelated svg are loaded correctly.
But in Android devices, icons are loaded perfectly.
ionic V 4.1.0
Activity
liamdebeasi commentedon Jun 25, 2019
Hi there,
Thanks for the issue. Can you provide the output of running
ionic infoin your project's directory?Thanks!
Gowrisankar23 commentedon Jun 25, 2019
Thanks for the replay.
`Ionic:
Ionic CLI : 5.0.0 (C:\Users\Anandhang\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.5.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 4 other plugins)
Utility:
cordova-res : not installed
native-run : 0.2.2
System:
NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10`
liamdebeasi commentedon Jun 26, 2019
Thanks for the follow up. When doing
ionic build --prodand using routing, you can't openindex.htmlusing its file path. you will need to serve it up using a server (even if it's just a local server).Can you serve your app using a server and let me know if you are still running into issues? If you have python installed, you can run a local server on your computer using
python -m SimpleHTTPServer 8000.Thanks!
Snickdx commentedon Jul 18, 2019
Issue still persists for me. Even on conference starter app with updated ionic angular. Served using live-server npm package
Ionic Info
Ionic:
Ionic CLI : 5.2.2 (C:\Users\snick\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.6.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Gowrisankar23 commentedon Jul 18, 2019
Hi Liam,
I ran the build (dist) folder live-server library. Still its not working for me.
Thanks.
liamdebeasi commentedon Jul 18, 2019
Thanks for the follow up. Are you able to reproduce this with an Ionic starter app?
Gowrisankar23 commentedon Jul 18, 2019
Yes. It's repeated in starter app also.
liamdebeasi commentedon Jul 19, 2019
Thanks for the follow up. I was able to reproduce this using the
live-serverpackage.What appears to be happening is in order for
live-serverto work properly with svg elements, it injects some JavaScript into thesvgelement.The Ionicons component strips anything inside of the
svgelement that is notsvgrelated material. Allowing JavaScript to be freely injected into our components would pose a security risk to our users, so we remove it.Additionally, there seem to be some issues with using svgs in
live-serverin general: tapio/live-server#272.As an alternative, you can use
python -m SimpleHTTPServer [PORT]if you need a simple server without live reloading. If you do need a server with live reloading, I would recommend you use your framework's solution for live reloading (for example, if building with Angular try usingng serve).I am going to close this as this is not an Ionic issue. I would recommend filing a bug on the
live-serverGitHub repo. Thanks!Snickdx commentedon Jul 20, 2019
Confirming error is on live-server's end. Works as expected on firebase hosting.
ionitron-bot commentedon Aug 19, 2019
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.