Components: Support relative paths for MatIcon based on baseUrl

[zmanring-zz]

Bug, feature request, or proposal:

The icons URL's seem to all be absolute based on /assets which works fine when you're in the root but when you need the icons to be relative it doesn't work.

What is the expected behavior?

The icons to be served up relative to the baseUrl

What is the current behavior?

Not relative, all absolute.

What are the steps to reproduce?

Deploy code into a sub-folder on s3 or alike

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

My app assets are stored in a sub-folder and the svgs cannot be found there

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.x | Material 2.x Beta 3 | Mac

Is there anything else we should know?

Keep up the good work!

[fxck]

I'm not sure I understand what are you talking about. What icon, what url? Lib itself, demo app, web?

[zmanring-zz]

so right now to bring in a icon/svg, I use

mdIconRegistry.addSvgIcon('logo', sanitizer.bypassSecurityTrustResourceUrl('../../../assets/images/logo.svg'))

But when I do that, the requested logo.svg after you deploy is looking for that file in /assets/images/logo.svg

This is fine and good when you have a app that sits in the root level of your domain. In my case it all sits behind a folder called webapp. Everything else works based on the <base href="/webapp/"> but the icons do not.

Hope that helps @fxck ?

[sajaynambiar]

Any update or workaround on the above issue?

[PawelOwczarekFalcon]

I need fix too

[pascalbayer]

Faced the same issue, using the --deploy-url="/some/path/" setting for a prod build.
My workaround is to put the deployUrl inside the environment.ts/environment.prod.ts and then build the path based on the environment:

// environment.ts
export const environment = {
    production: false,
    deployUrl: '..'
};

//environment.prod.ts
export const environment = {
    production: false,
    deployUrl: '/some/path'
};

// shared.module.ts
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('download', sanitizer.bypassSecurityTrustResourceUrl(`${environment.deployUrl}/assets/icons/download.svg`));
}

[thethinkingmonks]

Thank you. This helped me to solve the issue.