I have some troubles displaying svg/base64 encoded through img tag.
Here is the flow:

1. I am getting iconData (typeof string) from the server.
2. Want to display it in my component.

With p.1 no issues.
With p.2 I am getting broken image sign

Data JSON example:

{
    "icon": "PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjEyNSAyLjc1TDMuODc1IDE2LjI1SDE0TDEyLjg3NSAyNS4yNUwyNC4xMjUgMTEuNzVIMTRMMTUuMTI1IDIuNzVaIiBzdHJva2U9IiM0NzU0NjciIHN0cm9rZS13aWR0aD0iMi4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=",
}

My parsing method:

parseIcon(icon: string) {
return `data:image/svg+xml;base64,${icon}`;
}
      

My template:

<div class="cell cell--icon">
  <img [src]="parseIcon(icon)" />
</div>

The icon string is valid, because if I would just try it through code like this it will do the trick.

 private _parseIconBase64TSVG(): void {
    const container: HTMLElement = this.renderer.createElement('div');
    const svg: HTMLElement = new DOMParser().parseFromString(
      atob(this.iconData?.icon || ''),
      'text/xml'
    ).firstElementChild as HTMLElement;
    container.appendChild(svg);
    this.renderer.appendChild(this.iconWrapper?.nativeElement, container);
  }

Is there a way to do it without renderer, just through plain string value?