在Angular中引入Angular Material Icon的正确步骤
黄泰宁
背景：Angular7, Angular Material7
步骤：
- 先注册 MatIconModule
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
....
MatIconModule
],
exports: [
MatIconModule //如果不是注册在一个angular-material.module.ts中的话就不需要exports
]
})
- 在index.html 的head中添加link
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
- 如果写的是sass样式，需要在styles.scss中同样import 上面的url
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
- 注意：如果发现无法访问googleapi，则需要设置CSP。具体可以参考StackOverflow的这个话题：
Refused-to-load-the-font-datafont-woff-it-violates-the-following-content
类似资料：