Angular: Adding a custom SVG Mat-icon, Error retrieving icon :add1! Cannot read property 'includes' of null

Question

I followed this tutorial for the most part, Adding Custom SVG MatIcon. The mat-icon component is displayed but the svg image is not and I am getting an error in the console.

Error retrieving icon :hllogo! Cannot read property 'includes' of null.

This error message tells me very little. Is it complaining the svg does not exist? Just in case, while registering the svg as an icon, I have tried multiple variations of the relative paths to the svg file, but all of them seem to throw this error. Any idea what the error actually means?

PS: I generated the SVG file from a PNG file using an online engine, SVG Convertor, if that makes a difference.

The reference to the icon in the html

<button
      *ngIf="true"
      class="action-buttons"
      mat-icon-button
      matTooltip="Team synced"
      matTooltipShowDelay="500"
    >
      <mat-icon svgIcon="hllogo"></mat-icon>
    </button>

The Typescript:

//icon.service.ts
import { Injectable } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

@Injectable({
    providedIn: 'root'
  })

  export class IconService {
  
    constructor(
      private matIconRegistry: MatIconRegistry,
      private domSanitizer: DomSanitizer
    ) { }
  
    public registerIcons(): void {
      this.matIconRegistry
            .addSvgIcon('hllogo', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/img/HLThumb.svg'));
    }  
  } 

The reference to the icon service in the app.component.ts

import { Component } from '@angular/core';
import { IconService } from './shared/services/icon.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(
    private iconService: IconService
  ) {
    this.iconService.registerIcons();
  }
}