从材料图标加载图标注册表错误“ 标签未找到“

Question

我正在尝试使用Angular Material 7.2和Angular 7.2.11实现具有自定义SVG图标的按钮。我没有遇到使用标准材料图标字体的任何问题。但是，自定义图标只会导致控制台上出现“错误检索图标：找不到<svg>标记”。

我一直在挖掘@ angular / material / esm2015 / icon.js中的代码并发现_fetchUrl（）似乎正在接收SVG，但是HttpResponse对象的主体是空的，尽管包含SVG的ACTUAL响应已经过验证通过Firefox。 HttpResponse对象中的标头包含正确的内容长度。

将HttpResponse对象报告的URL粘贴到浏览器中会呈现正确的SVG。

_fetchUrl（）正在使用HttpClient :: get（）的'text'responseType选项，尽管响应指定了content-type: image/svg+xml，但这应该没问题。可以肯定的是，我重命名了SVG并给它一个'txt'扩展名。随后的响应有text/plain内容类型，但HttpResponse的主体仍然是空的。

从等式中删除材料图标注册表，只是尝试一个简单的get()产生相同的问题。请求成功完成，SVG被发送，但HttpResponse有一个空体。

应用模块：

import { HttpClientModule, ... } from '@angular/common/http';
import {
 ...
 MatIconModule,
 ...
} from '@angular/material';

@NgModule({
 ...
 imports: [
  ...
  HttpClientModule,
  MatIconModule
  ...
 ],
 ...
})

应用组件：

@Component({
 ...
})
export class AppComponent {
  constructor(private router: Router, private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer, private http: HttpClient, ...)
  {
    this.matIconRegistry.addSvgIcon('test_icon',
      this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/svg/test.svg'));

    http.get('/assets/svg/test.svg', { responseType: 'text' })    .subscribe(svg => console.log(`Response: ${svg}`));
  }
}

组件HTML：

<button mat-icon-button>
  <mat-icon svgIcon="test_icon"></mat-icon>
</button>

测试SVG文件：

<?xml version="1.0" encoding="UTF-8" ?>
<svg width="64" height="64" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="64" height="64" style="fill:rgb(0,0,0,0)" />
</svg>

<svg>Test</svg>

控制台输出：

Request to access cookie or storage on “https://fonts.googleapis.com/icon?family=Material+Icons” was blocked because we are blocking all third-party storage access requests and content blocking is enabled. calendar

Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:21273

Error retrieving icon: <svg> tag not found icon.js:867:81

请求/回复：

GET /assets/svg/test.svg HTTP/1.1

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Content-Type: image/svg+xml; charset=UTF-8
Content-Length: 219
ETag: W/"d9-8SqOE9sCdf/cpMgr8wAdHVFXV+g"
Date: Tue, 02 Apr 2019 00:36:12 GMT
Connection: keep-alive
<?xml version="1.0" encoding="utf-8" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
  <rect x="0" y="0" width="32" height="32" style="fill:rgb(0,0,0,0)" />
</svg>

Answer 1

最后将问题跟踪到项目中的HTTP拦截器。它正在消除反应的主体。

Answer 2

this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/svg/test.svg'));

你看得到差别吗？