Question

我无法在CDK层中显示SVG图标。我有以下代码：

app-menu.html

<mat-card #appMenuPortal class="app-menu" *cdkPortal>
  <div class="menu-grid">
    <a title="NPW" class='appMenuButton'>
      <mat-icon id="app-menu-NPW-icon" svgIcon="joomla"></mat-icon>
    </a>
...
  </div>
</mat-card>

app-menu.component.ts

...

  constructor(
    private readonly overlay: Overlay,
    private readonly notificationService: NotificationService,
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
      this.matIconRegistry.addSvgIcon(
        'joomla',
      this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/SVGicons/joomla.svg')
      );
    }

...

joomla.svg

<svg aria-hidden="true" style="position: absolute; width: 36px; height: 36px; fill: white; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-joomla" viewBox="0 0 36 36">
<title>joomla</title>
<path d="M8.313 8.646c1.026-1.026 2.688-1.026 3.713-0.001l0.245 0.246 3.159-3.161-0.246-0.246c-1.801-1.803-4.329-2.434-6.638-1.891-0.331-2.037-2.096-3.591-4.224-3.592-2.364 0-4.28 1.92-4.28 4.286 0 2.042 1.425 3.75 3.333 4.182-0.723 2.42-0.133 5.151 1.776 7.062l7.12 7.122 3.156-3.163-7.119-7.121c-1.021-1.023-1.023-2.691 0.006-3.722zM31.96 4.286c0-2.368-1.916-4.286-4.281-4.286-2.164 0-3.952 1.608-4.24 3.695-2.409-0.708-5.118-0.109-7.020 1.794l-7.12 7.122 3.159 3.162 7.118-7.12c1.029-1.030 2.687-1.028 3.709-0.006 1.025 1.026 1.025 2.691-0.001 3.717l-0.244 0.245 3.157 3.164 0.246-0.248c1.889-1.893 2.49-4.586 1.8-6.989 2.098-0.276 3.717-2.074 3.717-4.25zM28.321 23.471c0.566-2.327-0.062-4.885-1.878-6.703l-7.109-7.125-3.159 3.16 7.11 7.125c1.029 1.031 1.027 2.691 0.006 3.714-1.025 1.025-2.688 1.025-3.714-0.001l-0.243-0.243-3.156 3.164 0.242 0.241c1.922 1.925 4.676 2.514 7.105 1.765 0.395 1.959 2.123 3.431 4.196 3.431 2.363 0 4.28-1.917 4.28-4.285 0-2.163-1.599-3.952-3.679-4.244zM19.136 16.521l-7.111 7.125c-1.022 1.024-2.689 1.026-3.717-0.004-1.026-1.028-1.026-2.691-0.001-3.718l0.244-0.243-3.159-3.16-0.242 0.241c-1.836 1.838-2.455 4.432-1.858 6.781-1.887 0.446-3.292 2.145-3.292 4.172-0.001 2.367 1.917 4.285 4.281 4.285 2.034-0.001 3.737-1.419 4.173-3.324 2.334 0.58 4.906-0.041 6.729-1.867l7.109-7.124-3.157-3.163z" stroke="white" fill="white"/>
</symbol>
</defs>
</svg>

我得到如下的HTML输出：

<mat-card _ngcontent-c8="" class="app-menu mat-card ng-star-inserted">
    <div _ngcontent-c8="" class="menu-grid">
        <a _ngcontent-c8="" class="appMenuButton" title="NPW">
            <mat-icon _ngcontent-c8="" class="mat-icon" id="app-menu-NPW-icon" role="img" svgicon="joomla" aria-hidden="true" ng-reflect-svg-icon="joomla">
                <svg aria-hidden="true" style="position: absolute; width: 36px; height: 36px; fill: white; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false">
                    <defs>
                        <symbol id="icon-joomla" viewBox="0 0 36 36">
                            <title>joomla</title>
                            <path d="M8.313 8.646c1.026-1.026 2.688-1.026 3.713-0.001l0.245 0.246 3.159-3.161-0.246-0.246c-1.801-1.803-4.329-2.434-6.638-1.891-0.331-2.037-2.096-3.591-4.224-3.592-2.364 0-4.28 1.92-4.28 4.286 0 2.042 1.425 3.75 3.333 4.182-0.723 2.42-0.133 5.151 1.776 7.062l7.12 7.122 3.156-3.163-7.119-7.121c-1.021-1.023-1.023-2.691 0.006-3.722zM31.96 4.286c0-2.368-1.916-4.286-4.281-4.286-2.164 0-3.952 1.608-4.24 3.695-2.409-0.708-5.118-0.109-7.020 1.794l-7.12 7.122 3.159 3.162 7.118-7.12c1.029-1.030 2.687-1.028 3.709-0.006 1.025 1.026 1.025 2.691-0.001 3.717l-0.244 0.245 3.157 3.164 0.246-0.248c1.889-1.893 2.49-4.586 1.8-6.989 2.098-0.276 3.717-2.074 3.717-4.25zM28.321 23.471c0.566-2.327-0.062-4.885-1.878-6.703l-7.109-7.125-3.159 3.16 7.11 7.125c1.029 1.031 1.027 2.691 0.006 3.714-1.025 1.025-2.688 1.025-3.714-0.001l-0.243-0.243-3.156 3.164 0.242 0.241c1.922 1.925 4.676 2.514 7.105 1.765 0.395 1.959 2.123 3.431 4.196 3.431 2.363 0 4.28-1.917 4.28-4.285 0-2.163-1.599-3.952-3.679-4.244zM19.136 16.521l-7.111 7.125c-1.022 1.024-2.689 1.026-3.717-0.004-1.026-1.028-1.026-2.691-0.001-3.718l0.244-0.243-3.159-3.16-0.242 0.241c-1.836 1.838-2.455 4.432-1.858 6.781-1.887 0.446-3.292 2.145-3.292 4.172-0.001 2.367 1.917 4.285 4.281 4.285 2.034-0.001 3.737-1.419 4.173-3.324 2.334 0.58 4.906-0.041 6.729-1.867l7.109-7.124-3.157-3.163z" stroke="white" fill="white"></path>
                        </symbol>
                    </defs>
                </svg>
            </mat-icon>
        </a>
        <a _ngcontent-c8="" title="Upload">
            <i _ngcontent-c8="" class="material-icons" id="app-menu-upload-icon">file_upload</i>
        </a>
....
    </div>
</mat-card>

看起来好像HTML输出很好。我需要它显示在菜单网格中。在使用Chrome进行检查后，它会显示HTML，看起来像是正确的，但没有任何显示。注意：图标所在的背景不是白色。所有其他图标都显示，但它们只是材料图标。为什么未显示SVG图标？

Answer 1

对不起，

我的代码很好。我只是有一个错误的SVG文件/代码，因此无法正确呈现。

首先请确保您的SVG良好。：D

Angular-CDK SVG未显示

1 个答案: