mat-select-trigger doesn't work with cdk-virtual-scroll-viewport

Question

I have a mat-select field with images + text as items, which worked very well without virtual-scroll. But as I have many many images in the list, they were loaded all at once. To prevent this behaviour I am using the cdk-virtual-scroll-viewport. And it works well, except the fact, that the initial value is not selected (it worked with mat-select-trigger in the previous version). And the selection also disappears, if you resize the window.

Here my code. What can I do? Thanks a lot in advance.

<mat-select (openedChange)="openChange($event)">
              <mat-select-trigger>
                <img src="assets/{{selected[1]}}.svg" />
                + {{selected[0]}}
              </mat-select-trigger>
              <cdk-virtual-scroll-viewport itemSize="48" class="viewport">
                <mat-option *cdkVirtualFor="let i of items;templateCacheSize: 0" [value]="i" (onSelectionChange)="onSelectionChange($event)">
                  <img src="assets//{{ i[1] }}.svg" />+ {{i[0]}}
                </mat-option>
              </cdk-virtual-scroll-viewport>
            </mat-select>

  openChange($event: boolean) {
    if ($event) {
      const selectedIndex = this.items.findIndex(elem => elem[1] === this.selected[1]);
      this.cdkVirtualScrollViewPort.scrollToIndex(selectedIndex);
      this.cdkVirtualScrollViewPort.checkViewportSize();
    } 
  }

  onSelectionChange(change: MatOptionSelectionChange) {
    if (change.isUserInput) {
      this.selected = change.source.value;
    }