tltr: can I access the assets directory from angular?
I have a bunch of SVGs in a folder src/assets/icons
that I use with mat-icon
. The only drawback is when I add a new icon, I have to add the file and I have to add the filename to an array which I use to loop through for adding it to matIconRegistry
. Is there a way to simply read all files from the directory?
Here's my current solution:
@NgModule()
export class CustomIconModule {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
const icons = [
'icon1', 'icon2',
];
for (const icon of icons) {
this.matIconRegistry.addSvgIconInNamespace(
'my-namespace',
icon,
domSanitizer.bypassSecurityTrustResourceUrl(`./assets/icons/${icon}.svg`)
);
}
}
}
UPDATE: I wrote a bash script, that loops through the file, generates a .ts file with an array of all the filenames and does git add
. I run it in the pre-commit git hook. not ideal, but it kinda works for now. I would love to find a pure JS solution, though.