feat(MatIconRegistry): "Wildcard-URL" support for svg icon sets

Feature Description

The current approach of adding svg icons either results in loading a large svg sprite regardless how many icons are actually used (approach 2) or requires to register every icon individually (approach 1). Approach 1 is not viable because it requires developers to maintain a list of all used icons. Alternatively all icons could be added manually. This is an improvement over the sprite as users only download the used icons. The downside is that still all icon “metadata” has to be included in the app, even if 95% of icons are not used.

The ultimate goal would be to only include the icons in the build that are actually used. But it would be sufficient if the webapp (as seen from the user) only downloads the necessary icons (and metadata), even if the build includes all icons. Having the option to configure a directory for a svg icon set (where each icon resides as a single svg file) would solve this issue. An icon defined as <mat-icon svgIcon="foo"></mat-icon> would look up the icon foo.svg in the configured directory.

Current configuration of an SVG icon set:

// Approach 1: either add all icons individually
for (...) {
  matIconRegistry.addSvgIcon('foo', domSanitizer.bypassSecurityTrustResourceUrl('foo.svg'));
}

// Approach 2: or the icon set
matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('foo-set.svg'));

Desired configuration:

// Approach 3
matIconRegistry.addSvgIconSetWithPath('/assets/icons/');

Use Case

The primary goal is to reduce the size of the app the user loads. Popular svg sprites are large and most of those items are not used in apps.

Adding icons individually (approach 1) works, but requires to maintain a list of all used icons or having a list of all possible icons (e.g. a string array of icon names) which again adds unnecessary data that has to be downloaded.

There should be a third approach that solves the issue and only actually loads the icons and metadata that are used by an app.

[philmtd]

@crisbeto Thanks, I took a look at your changes and they look good to me.

Getting back to my original example I can now do the following if I want to resolve all icons in the default namespace manually:

matIconRegistry.addSvgIconResolver((name, namespace) => {
  return namespace === "" ? domSanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${name}.svg`) : null;
});

Can’t wait to use it once it’s released!

[crisbeto]

@philmtd it’s been a while since we discussed it, but I finally got back around to this issue. I’ve submitted #21431 which adds the ability to register a function that resolves the icon URL at runtime. Can you take a look if this is something that would’ve worked for your use case?