bug: complex SVG on ion-icon is not displayed on iOS

Bug Report

Ionic version: [x] 4.6

Current behavior: When you use a custom SVG for ion-icon and this SVG is a little more complex than usual, it does not appear in Safari / iOS. The same SVG works fine on both Safari and Chrome if you use it as background-image CSS property of an element.

Expected behavior: It should appear correctly on both Safari and Chrome.

Steps to reproduce:

• Clone project below
• Run npm install
• Run ionic serve
• Open both Safari and Chrome

Related code: https://github.com/anagstef/ion-icon-safari-bug

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1 (/Users/anagstef/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.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

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   NodeJS : v10.15.3 (/Users/anagstef/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.10.0
   OS     : macOS Mojave

[cmer4]

Cool:)

So the thing that caused this effect is still baseUrl related, but not really Ionic specific. See here more details: https://stackoverflow.com/questions/18259032/using-base-tag-on-a-page-that-contains-svg-marker-elements-fails-to-render-marke

I think ion-icon documentation around “custom” svg can be improved though, but other than that there is nothing Ionic can do to improve it

[cmer4]

@anagstef can you try the following:

modify “fill” property inside your rocket.svg to feature full absolute url:

instead of fill=‘url(#linearGradient-1)’ do fill=‘url(http://localhost:8100#linearGradient-1)’

This is just for triage. But I am pretty positive this is the issue with Safari not being able to find filters or gradients by relative urls.