部分Material Icons在Angular Material中无法正常显示问题求助

尝试使用Material Symbols Outlined系列的keep图标，但无法正常显示。使用以下HTML代码时，home、grading图标能正常渲染，唯独keep图标失效，部分其他图标也存在同类问题：

<mat-icon
  aria-hidden="false"
  aria-label="Example home icon"
  fontIcon="home"
></mat-icon>
<mat-icon
  aria-hidden="false"
  aria-label="Example home icon"
  fontIcon="grading"
></mat-icon> 
<mat-icon
  aria-hidden="false"
  aria-label="Example home icon"
  fontIcon="keep"
></mat-icon>

可能的原因及解决方法 #

• 图标未被包含在加载的字体包中
  Angular Material的mat-icon默认加载的Material Icons字体包可能不包含较新或小众图标。keep属于Material Symbols系列，和传统Material Icons并非同一字体集，需要单独引入对应字体资源。
• 图标名称不匹配
  确认keep在Material Symbols中的正确命名，部分图标在不同字体系列里可能存在大小写、拼写变体，需严格匹配官方定义的名称。
• 字体加载方式错误
  若使用Material Symbols，要确保项目中正确引入该系列的CSS文件，而非仅引入传统Material Icons的资源。比如通过Google Fonts引入时，需选择Symbols系列的专属链接。
• Angular Material版本兼容性
  旧版本Angular Material对新的Material Symbols图标支持可能不完善，检查并升级到兼容的版本即可解决。

内容的提问来源于stack exchange，提问作者Pytth