I have been attempting to load a custom SVG using the MatIconRegistry within my component. Here is the code snippet I am trying:
constructor(fb: FormBuilder,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer) {
this.matIconRegistry.addSvgIconInNamespace(
'capp',
'reassign',
this.domSanitizer.bypassSecurityTrustResourceUrl('../../../../assets/images/reassign.svg')
);
this.form = fb.group({
query: ''
});
}
When I use the icon in the browser like so:
<mat-icon svgIcon="capp:reassign"></mat-icon>Error retrieving icon: Failed to construct 'URL': Invalid URL
I have experimented with different relative paths for the SVG file, such as ./, /, and relative to the route (../../). Despite this, the only way I have achieved success is by specifying the full URL. However, this approach may not be consistent when deployed, and I believe the path to the SVG should be relative.
If anyone has any suggestions or advice on how to resolve this issue, I would greatly appreciate it.