Angular: read all files from asset folder

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.

Continue reading...