应用自定义全局字体系列时，Angular mat-icon不加载图标

在Angular中，使用mat-icon组件来显示图标是非常常见的。当我们想要应用自定义全局字体系列时，可能会遇到mat-icon不加载图标的问题。下面是解决这个问题的一些步骤和建议：

1. 确保已正确引入字体文件：首先，确保已将自定义字体文件正确地引入到Angular项目中。可以通过在styles.css或styles.scss文件中使用@font-face规则来引入字体文件。例如：

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/custom-font.ttf') format('truetype');
}

1. 配置Angular Material主题：在Angular项目中，可以使用Angular Material来管理应用的样式和主题。确保已正确配置Angular Material主题，并将自定义字体系列添加到主题中。可以在styles.scss文件中进行配置。例如：

@import '~@angular/material/theming';
@include mat-core();

$custom-font: 'CustomFont', sans-serif;

$custom-theme: mat-light-theme(
  (
    font-family: $custom-font
  )
);

@include angular-material-theme($custom-theme);

1. 使用mat-icon组件显示图标：在应用中使用mat-icon组件来显示图标。确保已正确设置mat-icon的fontSet和fontIcon属性。例如：

<mat-icon fontSet="fontawesome" fontIcon="fa-icon-name"></mat-icon>

其中，fontSet属性指定字体系列，可以是Angular Material提供的默认字体系列，也可以是自定义字体系列。fontIcon属性指定具体的图标名称。

1. 检查字体文件路径和格式：确保字体文件的路径和格式正确。可以通过浏览器的开发者工具检查网络请求，查看字体文件是否成功加载。

总结： 当应用自定义全局字体系列时，确保已正确引入字体文件，配置Angular Material主题，并使用mat-icon组件来显示图标。检查字体文件路径和格式，确保字体文件成功加载。以下是一些相关的腾讯云产品和产品介绍链接地址，供参考：

• 腾讯云字体库
• 腾讯云云服务器
• 腾讯云云原生应用引擎
• 腾讯云人工智能
• 腾讯云物联网
• 腾讯云移动开发
• 腾讯云对象存储
• 腾讯云区块链
• 腾讯云元宇宙