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.