Загрузка значка из Материала Icon Registry с ошибками «<svg> тег не найден»

Question

Я пытаюсь реализовать кнопки, которые имеют собственные иконки SVG, используя Angular Material 7.2 и Angular 7.2.11.Я не сталкивался с какими-либо проблемами при использовании стандартного шрифта значков материалов.Однако пользовательские значки просто приводят к появлению на консоли сообщения «Ошибка получения значка: <svg> тег не найден».

Я копался в коде в @ angular / material / esm2015 / icon.js и обнаружил, что_fetchUrl (), кажется, получает SVG, но тело объекта HttpResponse пусто, несмотря на фактический ответ, содержащий SVG, как проверено Firefox.Заголовки в объекте HttpResponse содержат правильную длину содержимого.

При вставке URL-адреса, сообщаемого объектом HttpResponse, в браузер отображается правильный SVG.

_fetchUrl () использует 'text' responseTypeОпция для HttpClient :: get (), что должно быть хорошо, насколько я могу судить, несмотря на ответ, указывающий 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'));

Вы видите разницу?