This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

We should do this and the high number of votes confirms the feature's importance.

We're currently focused on Firefox support and dependency injection debugging. If anyone wants to take this feature and implement it, I'll be happy to guide them through the process.

Hi @mgechev, I'd like to give it a try if possible, how may I contact you for more info and details about the codebase and the feature? Thanks in advance!

Hello @mgechev , I would like to contribute for this feature. How can I contact you for more information about?

I assigned to @hereiskeith, but feel free to collaborate together.

Ideally we'd like to have all the SVG icons available locally too so the application works offline identically to the way it functions online.

It's not yet clear to me what would be the best way to achieve this. Can we do anything at build time to download all the icons so that we don't have to commit them to the codebase here? cc @crisbeto

I'm not super familiar with how the DevTools is set up, but there are icon sets which are published to npm. E.g. here's the Material Design icon set from Google https://www.npmjs.com/package/material-design-icons which has both PNG and SVG versions. Then you can inline them using a Webpack loader and require or you could have Bazel copy them into the Chrome extension directory.

I imagine a solution looking something like

1. Add material-design-icons as a dependency
2. Use bazel to copy the material icon svgs to the devapp/prodapp directory at build time
3. Refactor each MatIcon component to be used with the method highlighted here

Thanks, @crisbeto @AleksanderBodurri!

Are you suggesting adding a genrule in the BUILD.bazel from shell-chrome/src/assets and creating a custom tool (.bzl) to help copy only the icon svgs used in devtools?

@hereiskeith Probably it would be good enough to add "@npm//:node_modules/<path to svgs>/**/*.svg" in the assets bazel file in shell-chrome under the srcs argument for the filegroup rule. This will include the exposed files in the final build under the path npm/node_modules/<path to svgs>/.... You should be able to use those paths with MatIconRegistry's addSvgIcon

@AleksanderBodurri When I do something like
srcs = glob(["@npm//:node_modules/material-design-icons/**/*.svg"]
in filegroup

The build ends up in this error Error in glob: empty segment not permitted

It looks like glob may not support "@": bazelbuild/bazel#1346

Also from the docs looks like Glob only searches files in its own package, and looks only for source files?

May I have your insights on this? Thanks

@hereiskeith
Ahh, I see, we may need to try a different approach. @devversion pointed out that there is a subset of material-design-icons vendored already in this repo in https://github.com/angular/angular/blob/master/third_party/github.com/google/material-design-icons.

Could we try bringing in the font from there with bazel and using it in DevTools? We can consider bringing in targeted material svgs if the font approach does not work.

Apologies for the late reply

@AleksanderBodurri No worries at all! I saw that font file as well when I was trying to solve the issue last week lol. The approach you suggested here is also recommended by https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting

I think I have made it work with your suggestion, just need to check if the tests passed. The PR is still in draft, but please feel free to let me know if you think there is anything (coding rules, coding styles) I should make changes to.

Many thanks again👍

@AleksanderBodurri No worries at all! I saw that font file as well when I was trying to solve the issue last week lol. The approach you suggested here is also recommended by https://developers.google.com/fonts/docs/material_icons#setup_method_2_self_hosting

I think I have made it work with your suggestion, just need to check if the tests passed. The PR is still in draft, but please feel free to let me know if you think there is anything (coding rules, coding styles) I should make changes to.

Many thanks again👍

Excellent, I'll review later today. Thank you 😄