Custom mat-icons break on pages with query parameters

[FingalP]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Custom mat-icons should work on all pages, including with query parameters

What is the current behavior?

They break on pages with query parameters the same way as they did here: https://github.com/angular/material2/issues/9276#issuecomment-430697800

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.
StackBlitz starter: https://goo.gl/wwnhMV

Use mat icons with custom svgs

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

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

Angular 7.0.0, Material 7.0.0, Ubuntu 18.04, Typescript 3.1.3, checked on Chrome and Safari

Is there anything else we should know?

Mat-icons were fixed to have their pathname updated here: https://github.com/angular/material2/pull/13641/files?k=v#diff-2d10fce6db6515c94d0bfb0c1e631ee3R66 but this doesn't take into account query parameters, so the icons break on pages with query parameters.

relevant commit: https://github.com/angular/material2/pull/13641/files?k=v#diff-2d10fce6db6515c94d0bfb0c1e631ee3R66

We just need to add _document.location.search at the end of getPathname here: https://github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L66

[lexeek]

Hi! I faced with a same error, just wanted to create a new issue about that, but it is already there. I've started to use a query parameters for some routes and got same behaviour. Is there a way to avoid this maybe a workaround for first time ?

[FingalP]

Hi @lexeek, our workaround is as follows: in the relevant module, add {provide: MAT_ICON_LOCATION, useFactory: MAT_ICON_LOCATION_FACTORY_PATCHED} where MAT_ICON_LOCATION_FACTORY_PATCHED is defined by:

import {MatIconLocation} from '@angular/material/icon/typings/public-api'; import {inject} from '@angular/core'; import {DOCUMENT} from '@angular/common';

// patched version of https://github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L60

export function MAT_ICON_LOCATION_FACTORY_PATCHED(): MatIconLocation { const _document = inject(DOCUMENT); return { // Note that this needs to be a function, rather than a property, because Angular // will only resolve it once, but we want the current path on each call. getPathname: () => { const pathnameAttempt = _document && _document.location && _document.location.pathname; if (pathnameAttempt) { if (_document.location !== null) { return pathnameAttempt + _document.location.search; } else { return pathnameAttempt; } } else { return ''; } } }; }

[angular-automatic-lock-bot[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.}