根据它们的值显示图标(Angular 4+)？_如何根据元素的值显示和样式化元素(Angular 4+)？_Angular管道返回值，但ngFor不显示它们 - 腾讯云开发者社区

根据它们的值显示图标是一个前端开发的需求，可以通过使用Angular 4+框架中的图标库来实现。Angular 4+框架提供了多个图标库，其中最常用的是Font Awesome和Material Icons。

Font Awesome（https://fontawesome.com/）是一个流行的图标库，提供了丰富的矢量图标。它的优势包括：
- 大量的图标选择，涵盖了各种不同的领域和用途。
- 可以通过CSS类名的方式轻松地在HTML中使用图标。
- 可以自定义图标的大小、颜色等样式。
- 支持响应式设计，可以根据屏幕大小自动调整图标大小。
- 在Angular 4+中使用Font Awesome，首先需要在项目中引入Font Awesome的CSS文件。可以通过以下步骤实现：
- 在项目的根目录下的index.html文件中，添加以下代码到<head>标签中：
- 在项目的根目录下的index.html文件中，添加以下代码到<head>标签中：
- 在需要使用图标的组件中，可以直接在HTML中使用Font Awesome提供的CSS类名来显示图标，例如：
- 在需要使用图标的组件中，可以直接在HTML中使用Font Awesome提供的CSS类名来显示图标，例如：
- 这将显示一个用户图标。

Material Icons是由Google提供的图标库，专为Material Design风格的应用程序设计而创建。它的优势包括：
- 与Angular Material框架无缝集成，可以轻松地与其他Material Design组件一起使用。
- 提供了大量的图标选择，符合Material Design的设计准则。
- 可以通过CSS类名的方式在HTML中使用图标。
- 支持自定义图标的大小、颜色等样式。
- 在Angular 4+中使用Material Icons，首先需要在项目中引入Material Icons的CSS文件。可以通过以下步骤实现：
- 在项目的根目录下的index.html文件中，添加以下代码到<head>标签中：
- 在项目的根目录下的index.html文件中，添加以下代码到<head>标签中：
- 在需要使用图标的组件中，可以直接在HTML中使用Material Icons提供的CSS类名来显示图标，例如：
- 在需要使用图标的组件中，可以直接在HTML中使用Material Icons提供的CSS类名来显示图标，例如：
- 这将显示一个人物图标。

总结：根据它们的值显示图标可以通过使用Angular 4+框架中的图标库来实现。常用的图标库包括Font Awesome和Material Icons。Font Awesome提供了丰富的矢量图标选择，可以通过CSS类名的方式在HTML中使用。Material Icons是由Google提供的图标库，与Angular Material框架无缝集成，符合Material Design的设计准则。在具体应用中，可以根据需求选择合适的图标库来实现图标的显示效果。