在Angular中引入Angular Material Icon的正确步骤

背景:Angular7, Angular Material7

步骤:

  1. 先注册 MatIconModule
import {
      MatIconModule } from '@angular/material/icon';

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

你可能感兴趣的:(Angular,Angular,Angular,Material,Icon,scss)