我在两种不同的用法中看到了Angular Material图标：<mat-icon>thumbs_up</mat-icon> 和 <mat-icon fontIcon="thumbs-up" />。它们之间有什么区别，应该在什么情况下偏向使用其中一种？

官方文档页面（官方文档页面）提到使用Angular Material Icons的三种方式：

1. 带连字的字体图标：这是一种通过使用连字来显示图标的方法。要在Angular Material中使用带连字的图标，你将它的文本放在 mat-icon 的内容中（例如 <mat-icon>thumbs_up</mat-icon>）。
2. 使用CSS的字体图标：这是通过为每个图标字形定义一个CSS类来显示图标的方法，通常使用一个 :before 选择器。要在Angular Material中使用字体图标，你将 fontIcon 输入设为对应图标的CSS类。
3. SVG图标：这是通过在DOM中获取并动态注入单个SVG元素来实现的显示图标的方法。要在Angular Material中使用SVG图标，你需要将你的SVG资源注册到Angular Material的 MatIconRegistry，然后再将 svgIcon 输入设为相应的值。

前两种方法相当相似，我在阅读文档并研究连字/字形时并不理解它们之间的差异。它们都通过加载一个图标字体文件来工作。文档甚至在 示例部分 将它们放在一起，在那里只给出其中一个的示例，以及一个SVG图标的示例。

解决方案

正如 @herrstrietzel在他们的 评论 中所提及的那样，这取决于所使用的图标库。默认情况下，<mat-icon> 期望使用Material图标字体，并且它同时支持这两种选项。如果改用第三方图标库与 <mat-icon> 一起使用，可能会只使用第二种（CSS）方法（例如Font Awesome）。

字体连字是在两个或多个字母组合成一个字符时产生的单一、统一字符。Material图标字体能够识别特定的字符序列（例如 “thumbs_up”），并在视觉上将其转换成一个图标字形。另一方面，CSS方法将字体字形显示为 :before 伪元素，正如这篇关于Font Awesome的 Stack Overflow问题所解释的那样。

如果两种选项都可用，字体连字在无障碍性方面可能更友好，因为图标文本包含对所渲染图标的描述，而不是一个无意义的Unicode字符。（在实际使用中，这不太可能成为问题，因为两种选项通常都要使用 aria-label 属性。）

另一方面，在图标字体加载失败的情况下（例如网络问题），字体字形（CSS）可能更合适。使用CSS方法，元素将保持空白或呈现一个不可见的正方形；而使用字体连字时，浏览器会在回退字体中直接渲染文本（例如 thumbs_up）。

这段文本将显示给用户，可能会打乱布局。

无论哪种方式，都需要加载整个字体文件，对于面向最终用户、对性能要求较高的应用，可能并不合适。