在Angular 6项目中实现多个mat-icon时，同一SVG图标出现在多个位置。

Question

我正在使用以下代码在app.component.ts文件中动态添加svg-icons：

[{'icon-name': 'ICON1' 'icon-url','assets/imgs/icon1.svg'}, {'icon-name': 'ICON2' 'icon-url','assets/imgs/icon2.svg'} ]

可以使用上述图标json数组的格式进行循环。MatIconRegistery在构造函数中被注入：

 constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) {

this.listOfIcons.forEach(icon => {
                this.matIconRegistry.addSvgIcon(icon.icon-name,
                this.domSanitizer.bypassSecurityTrustResourceUrl(icon-url.url));
            });

在html中，我们有以下标签：

在Angular项目中，同一个图标在多个地方显示，如何查看Angular 6项目中的svg文件？

以下是哑组件的示例：

- MindBrain

Answer 1

有可能问题实际上与SVG文件有关。

如果您的SVG文件具有相同的类或ID属性名称，则在呈现时可能会发生一些冲突。

对于其他遇到此问题的人，他们需要更改重复的id属性名称。

对于我来说，我有重复的id和class属性名称。但是，我只需要更改类名。

似乎每个人的情况都有所不同，但共同因素是不同SVG文件之间存在相同类或ID属性名称的重复名称。

---

这是我第一个SVG，我保留了类名为“cls-1”的未更改版本：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134">
    <defs>
        <style>.cls-1{fill:#fff;fill-rule:evenodd;}</style>
    </defs>
    <title>Glitch_White_RGB</title>
    <path class="cls-1" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)" />
</svg>

我的第二个SVG，我将类名更改为“cls-2”：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134">
    <defs>
        <style>.cls-2{fill:#6441a4;fill-rule:evenodd;}</style>
    </defs>
    <title>Glitch</title>
    <path class="cls-2" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)" />
</svg>

我最初在这里发布了我的解决方案。 帮助我解决问题的原始评论在这里。

- Payaam Emami