如何在 Angular Material 中使用自定义图标

如果您希望在 Angular Material 中使用自定义图标，则需要执行几个步骤。 首先，您需要创建自己的图标集。 Angular Material 带有一组内置图标，但您也可以创建自己的图标。 获得图标后，您需要使用 Angular Material 注册它们。 这可以在您应用的模块文件中完成。 注册图标后，您可以像使用内置图标一样使用它们。 您可以在标记中使用它们，也可以通过编程方式访问它们。 这就是在 Angular Material 中使用自定义图标的全部内容！ 通过执行这些步骤，您可以轻松地将自己的图标添加到 Angular Material 以在您的应用程序中使用。

在本教程中，我们将使用 >mat-icon> 组件来创建 Material Icons 字体。 除了支持自定义 sva 图标外，还将使用该组件。 在 GitHub 上，您可以找到完整的工作代码。 这篇文章是为那些只学习 Angular v4.2+ 的人准备的。 本教程的 Angular 材质最初是用 Angular 5.2 和 Angular 10.1 编写的。 我们将在本教程中使用的图标（类似于一张笑脸）是心情图标。 除了完整的 Material 图标列表外，Material Design 网站还提供了多种可单独使用的图标样式。

我们现在可以使用鼠标图标来显示 SVG。 通过在 .html 文件的输入属性中输入标签，您可以使用图标标签来指定访问哪个图标。 URL 应该是 https://app.html。 让我们看一下当前可用的内容。 当您在浏览器中查看应用程序时，您会注意到自定义图标采用 Material 样式。 将 MatIconRegistry 移动到服务类中将有助于它维护和清洁代码。

我如何在 Angular 12 中使用 Svg 图标？

为了在 Angular 12 中使用SVG 图标，您需要安装 @angular/material 和 @angular/material-extensions 包。 然后，您可以使用 matIconRegistry 服务来注册图标并将它们添加到您的组件中。

您可以使用Icon.svg 文件作为您的独立文件来管理 Angular2 中的代码。 此外，可以使用 ng-inline-svg 模块（或者，如果可能，其他类似的方法）来执行此操作。 因此，它本质上是介于两者之间的东西——每种类型的图像都有单独的文件，当页面加载时图像是内联的，因此您可以使用 JS/CSS 来操作它们。

使用 aria-describedby 作为 SVG 的一部分将使残障用户在使用您的网站时获得更好的体验。 因此，当您使用 aria-described by 描述您的图标时，您将能够确保残障用户能够理解它们所代表的内容。

Png VS 的辩论。 Svg 图标

另一方面，也可以将 alpha 通道添加到 SVG 文件中。 换句话说，因为它们可以包含在透明区域中同时保留一点颜色，所以 SVG 图标比PNG 图标更通用。 选择将哪个文件用于图标取决于您的特定项目及其需求。

如何在 Html 中使用自定义 Svg 图标？

要在 HTML 中使用自定义 SVG 图标，您需要在图标元素的 href 属性中包含图标的文件路径。 文件路径应相对于页面的根目录。 例如，如果图标位于根目录中名为“icons”的文件夹中，则文件路径将为“icons/icon.svg”。

自从引入在线工具（如 Icomoon 和 Fontello）以来，创建网络字体变得更加容易。 使用 HTML5，我们可以访问范围更广的图标，这要归功于可缩放矢量图形。 如果您想为 Explorer 8 提供技术支持，有几个简单的回退选项。 片段的标识符是内置的 SVG 属性。 如果我们想使用 SVG 视图规范或寻址数组，我们可以引用片段。 该元素是基于其 >view> ID 的SVG 元素。 要仅显示此棋子精灵（来自维基百科共享资源）中的黑马，您必须像在下面的方案中那样检测值。

使用 img 标签定义图像，该技术适用于 Firefox、Chrome、Safari（桌面）和 Opera。 或者，您可以使用外部 SVG 文件来创建 CSS 精灵，如下图所示。 这是一种可靠的、随时可用的制造技术。 我在各种主要浏览器（包括 IE8）中对其进行了测试，并且运行良好。 图标作为标签出现在屏幕上。 同样，Icomoon 可用于手动创建符号标签集合，或者您可以使用某些 Grunt 插件（谷歌用于 Grunt SVG 合并）来执行此操作。 除IE9外，此方法适用于所有主流浏览器。 甚至 Jonathan Neal 的解决方案 SVG4everybody 也可以用来解决这个问题。

除非源代码指定了所需的宽度属性，否则 sva 图像不会在 Chrome 浏览器中显示。 如果 SVG 没有这个属性，浏览器会将图像放大或缩小。

如何在网页上使用 Svg 图像

您可以使用 svg> /svg> 标签将 SVG 图像直接插入到 HTML 中。 可以在 VS 代码或您喜欢的 IDE 中访问 SVG 图像，方法是复制代码并将其粘贴到 HTML 文档的 body 元素中。 如果一切顺利，您的网页将与此处显示的完全一样。
只需在网络浏览器中输入名称，即可使用 SVG 图像创建图标。 HTML 可以嵌入其中，并且可以安装它们的缓存版本。 证据也对未来充满希望。 应使用 PNG 或可缩放图形界面 (SVG) 创建图标。

Angular Material Svg 图标列表

Angular Material 库基于 Google 的 Material Design 规范提供了一组可重用、经过良好测试且可访问的 UI 组件。 该库的功能之一是能够将 SVG 图标用作 Material 图标。 Angular Material 图标集包括各种各样的图标，包括社交媒体图标、文件类型图标和箭头。 您可以在 Material icons 站点上浏览 Angular Material 图标的完整列表。

可以使用 Angular Material 的 Mat -Icon 组件显示图标。 该组件的主要功能是能够使用 Font-awesome 等网络字体显示图像，它只需要您需要的图像名称即可。 不属于网络字体的图标会怎样？ 在图标中，您是否希望在运行时进行更改（例如，悬停时的颜色或特定位置按钮的状态）？ 打开浏览器控制台部分后出现以下错误。 使用资源 URL 上下文时，使用值 unsafe。 将URL定义为参数用于绕过SecurityTrustResourceUrl，这样可以防止攻击者注入恶意URL，例如这个，参见DomSanitizer官方文档。

稍后我们会看到更好的方法，但现在，我们只是将它们放在 app.html 页面上。 如上所述，在 mat -icon HTML 标记中添加一个类。 当用户将鼠标悬停在图标上时，图像的颜色会因 SCSS 而发生变化。 将鼠标悬停在图标上时，图标现在应该会改变颜色。 作为未来帖子的一部分，我们将研究改进这一点并重构以允许使用服务加载图标。

如何使用 Angular Material 图标

我在哪里可以找到角度材料图标？
您唯一需要做的就是在您的 HTML 代码中使用以下 Google 网络字体 CSS。 材料图标可以在单个文件 (42KB) 中找到，大小范围从大到小。 图标分为十个不同的类别，您可以在 Git 存储库中看到它们。 这些图标也可以托管在您自己的服务器上。
有哪些查看材料图标的好网站？
我们已将 Material 图标编译到 Git 存储库中，其中包括我们提供的所有格式。
自定义图标的最佳方式是什么？
必须将 class 元素添加到 mat-icon HTML 标记中，如上所示。 将 SCSS 添加到类中会在用户将鼠标悬停在图标上时更改图标的颜色。 将鼠标悬停在图标上时，它们现在应该会改变颜色。

如何使用 Angular Material 图标

Angular Material 图标是可以在 Angular 应用程序中使用的 SVG。 要使用图标，只需将图标类添加到元素即可。 例如，要使用 account-circle 图标，您可以将类 mat-icon-account-circle 添加到元素中。

我们有角度的材料库，可用于快速设计我们的应用程序并为其分配构建标签。 素材库中包含一个 mat-icon，这是向我们显示图标所必需的。 在接下来的部分中，我们将学习如何安装所需的库以及如何实现它以在我们的应用程序中显示图标。 我们的第一个服务是 MatIconRegistry，它是一个注册表，允许我们使用可注入的服务来识别和定义图标的别名。 该图标使用起来非常简单，但它需要将此指令导入到我们打算显示它的项目或根模块中。 在命令提示符下启动上述命令以创建一个新的角度项目。 请尝试下面列出的命令之一，以确保所有必需的库都安装到我们的项目中。 对于开发人员来说尤其如此，他们可以直接在我们的应用程序中使用库和模块，而无需处理将库和模块添加到根模块的步骤。

Mat 图标 Svg

maticon svg是一种简单的矢量图形，可用于表示图标或徽标。 图形可以在不降低质量的情况下调整大小，并且可以轻松编辑或更改。

使用角度材料 mat-ion 组件，我们可以生成局部 SVG。 我们在构造函数中注入 MatIconRegistry 服务和 DomSanitizer。 registerIcons() 函数包括参数 load 和 URL，以及一个名为 load 的私有函数。 如果我们使用这个变体，我们只需要添加图像文件的名称。 如果您使用的是字符串，则 icon.service 加载函数会略有不同。 图像名称将通过使用索引作为加载函数中图像名称的键来生成。 现在必须在应用程序开始加载时激活该服务。 阅读和维护代码要容易得多，因为它更具可读性。 我们已将图像分成不同的部分，并实现了更简单的服务。