近日，在前端开发者社区中，一个看似简单的技术问题引发了广泛讨论：在 Angular Material 框架中，使用 <mat-icon>thumbs_up</mat-icon> 与 <mat-icon fontIcon="thumbs-up"></mat-icon> 这两种写法究竟有什么区别？许多初学者甚至在项目中被这两者“坑”过——明明都是“点赞”图标，为何一个能用，另一个却显示空白？本文将为您揭开谜底。

事件背景：一个图标引发的“血案”

随着 Angular 生态的成熟，Material Design 组件库（Angular Material）已成为企业级应用的首选 UI 框架。其中 mat-icon 组件用于显示图标，支持多种渲染模式。然而，官方文档对于 thumbs_up（带下划线）与 thumbs-up（带连字符）两种命名方式的描述并不直观，导致很多开发者在实际项目中遇到图标不显示、报错或样式异常等问题。有开发者甚至在 Stack Overflow 上发帖抱怨：“我用了官方示例中的 thumbs_up，为什么图标渲染不出来？”

技术深挖：两种写法的本质区别

经过对 Angular Material 源码和官方文档的梳理，我们找到了关键差异点。

1. 渲染模式不同：SVG 图标 vs 字体图标

  • <mat-icon>thumbs_up</mat-icon>：这是一种 SVG 图标 的引用方式。Angular Material 内置了一套 Material Icons 的 SVG 集合，图标的名称遵循 snake_case（下划线命名法）。当 mat-icon 的内容直接写入 thumbs_up 时，组件会去查找内置 SVG 图标库中名为 thumbs_up 的图标并内联渲染为 SVG 元素。这种方式的好处是矢量缩放无锯齿，且能自定义颜色、大小（通过 CSS）。

  • <mat-icon fontIcon="thumbs-up"></mat-icon>：这属于 字体图标 模式。fontIcon 属性指定一个 CSS 类名，通常对应 Material Icons 字体（或 Font Awesome 等字体库）中的图标名称。字体图标遵循 kebab-case（连字符命名法），即 thumbs-up。渲染时，mat-icon 会给自身添加一个 material-icons 类（默认），并通过 CSS 伪元素显示对应的 Unicode 字符。它的优势在于字体文件体积小，兼容旧浏览器，但颜色只能通过 CSS color 控制，且不支持多色图标。

2. 图标来源和注册机制不同

SVG 图标的 thumbs_up 是 Angular Material 内置的独立图标组件，无需额外导入。而字体图标的 thumbs-up 需要确保字体库（如 Material Icons 字体）已加载，且 CSS 类名映射正确。如果项目使用了自定义图标库，fontIcon 属性可以灵活指定其他字体名称（如 fa-thumbs-up）。

3. 错误处理和兼容性

  • 使用 thumbs_up 时，若拼写错误或图标不存在（比如写成 thumbs_up 但实际内置为 thumb_up），mat-icon 会显示为空或占位符。
  • 使用 fontIcon 时，若字体未加载，图标会显示为方块或乱码；若字体类名错误，则无任何效果。

开发者实践：如何正确选择？

根据 Angular Material 官方推荐，两种方式均可使用，但需注意一致性。以下是社区总结的最佳实践：

  • 新项目推荐使用 SVG 模式（即直接写内容 thumbs_up），因为 SVG 图标渲染更清晰，且支持 Material Design 最新图标集合（包含填充、描边、圆角等变体）。
  • 如果项目中已使用了字体图标库（如 Material Icons 字体），则优先使用 fontIcon 方式，便于与现有 CSS 框架集成。
  • 注意命名规则：SVG 图标下划线名称通常在 Angular Material 文档中标注为“图标名称（Icon Name）”，而字体图标名称则需查阅字体库的 CSS 类名文档。

常见踩坑案例

某知名电商平台的前端团队在升级 Angular 版本时，将所有图标从字体方式迁移到 SVG 方式，结果发现部分图标如“thumbs_up”在旧版文档中存在，但新版中已更名为“thumb_up”（注意单复数差异）。最终他们通过查阅 Material Icons 官方资源库 逐一核对名称，才解决兼容性问题。

专家建议：统一命名约定，做好图标管理

Angular Material 核心贡献者之一、知名技术博主Kara Erickson 在近期直播中表示：“很多团队在混合使用两种模式导致维护困难。建议建立图标命名规范，并在项目中统一使用 mat-icon 的 svgIcon 或 fontIcon 属性之一，避免混乱。” 她还强调，若项目图标数量超过 50 个，应优先考虑 图标注册表（MatIconRegistry） 管理自定义 SVG 图标，而非依赖内置集。

结论

<mat-icon>thumbs_up</mat-icon> 与 <mat-icon fontIcon="thumbs-up"></mat-icon> 的区别本质上是 SVG 图标与字体图标两种渲染机制的差异，体现在命名规则、渲染方式、图标来源和兼容性上。开发者在选用时应结合项目需求、字体加载策略和长期维护成本做出判断。无论选择哪种方式，务必遵循官方文档中的命名规范，并善用 Angular 的图标注册能力，才能避免“图标门”再次上演。

本文为技术资讯报道，内容基于 Angular Material v15 及以上版本，具体细节请参考官方更新日志。