Components: How to register and sanitize svg icons globally for use by all components?

[medeirosrich]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

A way to register and sanitize svg icons globally for use by all components.

What is the current behavior?

Currently following the demo at:
https://github.com/angular/material2/tree/master/src/demo-app/icon

Each component needs 2 imports:

import {DomSanitizer} from '@angular/platform-browser';
import {MdIconRegistry} from '@angular/material';

and constructor code for each icon:

constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
    mdIconRegistry.addSvgIcon('icon1',sanitizer.bypassSecurityTrustResourceUrl('assets/icon1.svg'));
    mdIconRegistry.addSvgIcon('icon2',sanitizer.bypassSecurityTrustResourceUrl('assets/icon2.svg'));
}

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

To reduce boilerplate and repetition.
Our company uses a library of individual custom svg icons used by different applications and frameworks.
Would like to be able to register all icons upfront for easy use in any component template.

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

All

Is there anything else we should know?

2521

[mtrdp642]

As long as you register the icons in the root component (usually app.component.ts), the icons are able to be used for all child components. Example

[medeirosrich]

@mtrdp642
Awesome, thanks!

[SvenBudak]

Is there any done icon coponent that keep anyone up to date?

[ghost]

Change it to
import { DomSanitizer } from '@angular/platform-browser'; import { MatIconRegistry } from '@angular/material';

[ORESoftware]

With mat-icon instead of md-icon, what is the API to register an icon?

something like this:

constructor(mdIconRegistry, sanitizer) {
 matIconRegistry.addSvgIcon('icon1',sanitizer.bypassSecurityTrustResourceUrl('assets/icon1.svg'));
 matIconRegistry.addSvgIcon('icon2',sanitizer.bypassSecurityTrustResourceUrl('assets/icon2.svg'));
}

which class constructor is that for?

[mtrdp642]

@ORESoftware icons can be registered in any component and then used displayed in that same component or any child. The API for icon registration is the same as your code snippet.

[ORESoftware]

@mtrdp642 yeah I tried that and it didn't work - see:
https://stackoverflow.com/questions/48123152/cannot-register-svg-icon

maybe I am injecting the wrong matIconRegistry dep? idk

[mtrdp642]

@ORESoftware I posted a Plunker above with an example of using svg files with <md-icon>'s. Based on your StackOverflow link, it doesn't look like you added MatIconRegistry to the component's viewProviders array in the @Component's declaration. Also, not sure if it matters, but I believe the paths to the .svg files are relative to the class you're registering them in.

[ORESoftware]

yeah so this is what I have now:

import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

@Component({
  viewProviders: [MatIconRegistry],
  selector: 'app-control-panel',
  templateUrl: './control-panel.component.html',
  styleUrls: ['./control-panel.component.scss']
})

export class ControlPanelComponent implements OnInit {

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

    console.log('registering  play button icon');
    iconRegistry.addSvgIcon('play_button',
      sanitizer.bypassSecurityTrustResourceUrl('assets/images/play-button.svg'));
  }

  ngOnInit() {
  }

}

yeah doesn't work just yet...huh..I figure if it couldn't locate the image on the fs, it would complain in the console, but I don't see any errors..fml

[duluca]

@ORESoftware Please also ensure that you import HttpClientModule in app.module.ts so the asset you're requesting can be downloaded.

[pavel-agarkov]

Registration inside module constructor works as well.
Also you will be able to use icons registered this way in other modules if they import the module with registration.

[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._}