fetch svg

svgs-api.service.ts

import { Injectable, ErrorHandler } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SvgsApiService implements ErrorHandler {

  private httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'text/html; charset=UTF-8'
    })
  }
  constructor(
    private httpClient: HttpClient
  ) { }

  getSvg(type: string):Observable<any> {
    return this.httpClient.get(`/assets/images/svgs/${type}.svg`, {responseType: 'text'})
    .pipe(
      catchError(this.handleError)
    );;
  }
  handleError(error: HttpErrorResponse):Observable<any> {
    if (error.error instanceof ErrorEvent) {
      console.error('Oh, no! Client says:', error.error.message);
    } else {
      console.error(
        `Yikes! Server says: ${error.status}, ` +
        `error name: ${error.name}` + ` error message: ${error.message}`);
    }
    // return an observable with a user-facing error message
    return throwError(
      'Something bad happened; please try again later.');
  };
}