I've been trying to include a number of the Material Icons into an Angular project but each time I do I find some peculiarities.
1. Icons work if all icons are imported
The following method does successfully include all icons into a project:
<!-- index.html -->
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
...
</head
// app.module
import { MatIconModule } from '@angular/material/icon'
...
@NgModule({
imports: [
MatIconModule
]
})
<!-- component.html -->
<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>
The icon is included and shows in the page as expected. However since I've never explicitly imported the one icon I'm using I have to assume that the entire module has been imported. That's a lot of code for one icon and I would prefer to import them one-by-one.
2. Using MatIconRegistry to import them one-by-one throws errors
Since including the whole module leaves me with a bloated package, I instead try using MatIconRegistry. My understanding is that this should allow me to register icons one-by-one.
// app.module
import { MatIconModule } from '@angular/material/icon'
...
@NgModule({
imports: [
MatIconModule
]
})
// my.component.ts
import { DomSanitizer } from '@angular/platform-browser'
import { MatIconRegistry } from '@angular/material/icon'
...
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'home',
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/home-icon.svg')
)
}
<!-- my.component.html -->
<mat-icon svgIcon="home" aria-hidden="false" aria-label="Home icon"></mat-icon>
There are two problems with this though. The first is that I've no idea where that assets file is going to come from since it doesn't currently exist in my filesystem. And the second is that the the compiler doesn't like it anyhow:
ERROR in src/app/modules/platform/entries/entries.component.html:8:5 - error NG8001: 'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
So the first method works but I can't make the second method work. And I fear/assume that the first method means that the entire icon set is imported making it very inefficient.