How to Include Angular Components into Vis Timeline Item

Question

I am trying to include custom Angular components/Material components into Vis Timeline. I am specifically trying to do so in order to render icons a certain way. I looked at this answer which introduced the idea of templating to me, however, it does not seem to work for Angular components nor for material icons which I was testing out.

for (var j = 0; j < 8; j++) {
      var date = new Date();
      for (var i = 0; i < count/8; i++) {
        date.setHours(date.getHours() +  4 * Math.random());
        var start = new Date(date);
        date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
        var end = new Date(date);
        if (i % 2 == 0) {
          this.data.add({
            id: order,
            group: truck,
            start: start,
            end: end,
            style: 'background-color: #48c2c2; color: white',
            content: 'Order ' + order,
            icon: 'face'
          });
        }
        else {
          this.data.add({
            id: order,
            group: truck,
            start: start,
            end: end,
            style: 'background-color: #5a6069; color: white',
            content: 'Order ' + order,
            icon: 'apps'
          });
        }
        

        order++;
      }
      truck++;
    }      

    this.options = {
      stack: false,
      start: new Date(),
      end: new Date(1000*60*60*24 + (new Date()).valueOf()),
      editable: true,
      margin: {
        item: 10, // minimal margin between items
        axis: 5   // minimal margin between items and the axis
      },
      orientation: 'top',
      horizontalScroll: true,
      verticalScroll: true,
      zoomable: false,
      template: function (item: any, element: any, data: any) {
        // var html = `<span class='material-icons'>${item.icon}</span><div>${item.content}</div>`
        var html = `<mat-icon fontIcon="${item.icon}"></mat-icon><div>${item.content}</div><app-test-render></app-test-render>`
        return html;
      },
      xss: {
        disabled: false,
        filterOptions: {
          whiteList: { span: ['class'], div: ['class'] }
        },
      }
    };
  }

This results like so

Is there a way to get templating to render angular components/material? I suspect this has something to do with the whitelisting, however, it does not let me include "mat-icon" nor "app-test-render" in the whitelist array. And I don't think disabling whitelisting is a great idea either. What is a potential solution? Thanks