Enhancement: mat-icon set current page absolute path on filter urls for compatibility with safari

[MikaAK]

Feature request:

mat-icon is super useful for using svg's inline in the browser. However what's the solution when you need to filter. Since <base href='/'> is in use for history you must append svg filters with the current url.
Example:

<svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="b" fill="#fff">
      <use xlink:href="#a"/>
    </mask>
  </defs>
  <path d='SOMEAMOUNTOFPOINTS' mask='url(http://example.com/my-page#b)'
</svg>

This works because url is set to absolute path. Anything else and the svg works in chrome but not in safari! This used to be an issue in chrome a few years ago but it seems chrome got smarter, however safari has not 😢

What are the steps to reproduce?

I tried to reproduce on plunker but since there's no baseUrl being set and it doesn't seem possible to set I cannot reproduce.

What is the use-case or motivation for changing an existing behavior?

Safari Compatibility

Other Info

As a workaround you can skip setting baseUrl in the index document and set it with

import {APP_BASE_HREF} from '@angular/common'

providers: [{provide: APP_BASE_HREF, useValue: '/'}]

[jelbourn]

Possible duplicate of #4263

[MikaAK]

Not quite @jelbourn that issue seems to be around allowing urls passed to the register to be relative. This is more around either changing the actual url's of the svg's filters/masks when referencing defs (since it must change on a per page basis this would need to be done at render).

see https://github.com/jeffbcross/angular-svg-base

[MikaAK]

New findings, the workaround I provided above doesn't seem to work on subroutes. For example when navigating to http://localhost:3000/pain-module/quieting-the-pain-alarm it tries to request packages from http://localhost:3000/pain-module/

With this new addition, this makes svg filters unusable in safari

[tenbits]

Also clip-path="url(#a)" doesn't work in safari. Painful.

[FingalP]

We tried upgrading to Material 7, and this broke icons on our header in Chrome. As they are in our header, they get rendered on the first page which is opened, and the url is set to that path. Once we navigate from there, they aren't re-rendered, so the url is now wrong, and they vanish.

[MikaAK]

That is a probably issue with doing this and having icons persistant across pages. The icons would need a url update

[FingalP]

It turns out, all of our icons are broken, not just the ones which are persistent across pages, as the _location is cached by the location factory.
However, a fix should also also consider supporting icons which are persistent across pages.

[crisbeto]

#13641 should sort the issue out. My understanding is that the URLs don't have to be updated once they're in place, but the problem is that the provider caches the path the first time it's resolved.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}