如何阻止Angular Material向<head>注入Roboto字体及Material Icons链接？

适用于Angular Material v15+（MDC架构版本） #

通过配置提供者禁用自动注入：

• 在app.config.ts（独立组件项目）或app.module.ts中，使用provideFonts配置：

import { provideFonts } from '@angular/material/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFonts({ disableInjection: true }),
    // 其他提供者
  ]
};

• 或者在配置Material Design系统时，通过typography选项设置：

import { provideMaterialDesignSystem } from '@angular/material/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMaterialDesignSystem({
      typography: { disableFontInjection: true }
    }),
    // 其他提供者
  ]
};

适用于Angular Material v14及以下版本 #

覆盖MAT_FONT_CONFIG提供者来禁用：

import { MAT_FONT_CONFIG } from '@angular/material/core';

@NgModule({
  providers: [
    {
      provide: MAT_FONT_CONFIG,
      useValue: { disableInjection: true }
    }
  ],
  // 其他模块配置
})
export class AppModule { }

自定义字体引入（可选） #

若需手动控制字体加载，先在全局样式文件（如styles.scss）或index.html中手动引入字体：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

再按照上述对应版本的方法禁用自动注入，避免重复添加链接。

内容的提问来源于stack exchange，提问作者Per Nissilä