New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(MatIconRegistry): "Wildcard-URL" support for svg icon sets #18607
Comments
We use the URL to fetch the icon using an HTTP request. I'm not sure how that would work out when passing in a pattern. We also have support for defining an icon as a string so you could use Webpack to import the icons as a pattern (e.g. |
The icons would have to reside in a directory (which "defines" the icon set), e.g. "assets/icons". The URL would have to be composed by using the path to the directory and the icon name plus the svg file extension (e.g. I think to add the functionality a method similar to the following would have to be added in the icon registry (maybe // something similar to this:
private _loadNamedSvgIconFromConfigPath(iconName: string, config: SvgIconConfig): Observable<SVGElement> {
return this._fetchUrl(`${config.url}/${iconName}.svg`)
.pipe(map(svgText => this._createSvgElementForSingleIcon(svgText, config.options)));
}
Yes but, as in my described approach 1 developers still would have to take care of maintaining "a list" of the icons they used, right? Otherwise, if I'd just put 1000+ icons in a directory, webpack would include them all and register them regardless of whether I only used 5 of those icons or all of them. This still leads to a user downloading more code than necessary because the code that registers 1000 icons is always executed, even if the corresponding icons are never used. Having the possibility to just tell the icon registry "In directory X are my icons, please look them up there." would solve the issue. No individual registration required (less code) and only used icons are downloaded. |
What do you think of this approach, @crisbeto? |
I think that it would make more sense to allow for a function to be passed in that allows people to construct the URL themselves, rather than coming up some kind of templating. I'd wait until #18654 gets in before changing anything since it moves some things around. |
Currently all of the ways to register icons (e.g. via URL or literal) require the developer to know the list of icons ahead of time or to fetch more icons than the user needs. These changes aim to address this issue by adding the ability to register an icon resolver function which will construct the URL at runtime, depending on the requested icon. Fixes angular#18607.
Currently all of the ways to register icons (e.g. via URL or literal) require the developer to know the list of icons ahead of time or to fetch more icons than the user needs. These changes aim to address this issue by adding the ability to register an icon resolver function which will construct the URL at runtime, depending on the requested icon. Fixes angular#18607.
@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! |
Currently all of the ways to register icons (e.g. via URL or literal) require the developer to know the list of icons ahead of time or to fetch more icons than the user needs. These changes aim to address this issue by adding the ability to register an icon resolver function which will construct the URL at runtime, depending on the requested icon. Fixes #18607.
…lar#21431) Currently all of the ways to register icons (e.g. via URL or literal) require the developer to know the list of icons ahead of time or to fetch more icons than the user needs. These changes aim to address this issue by adding the ability to register an icon resolver function which will construct the URL at runtime, depending on the requested icon. Fixes angular#18607.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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 iconfoo.svg
in the configured directory.Current configuration of an SVG icon set:
Desired configuration:
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.
The text was updated successfully, but these errors were encountered: