angular - How to add ng-content to multi select component

Question

models:

export interface ISelectOption {
  value: string
  viewValue: string
  disabled?: boolean
  icon?: string
  rx?: string[]
}

export interface ISelectOptionGroup {
  disabled?: boolean
  icon?: string
  name: string
  options: ISelectOption[]
}

I am attempting to place an icon in a multi-select component. This icon is place to the right of the group

I have the following component

<form
    [formGroup] = 'form'
    autocomplete = 'off'
    fxLayout = 'col wrap'
    fxLayoutAlign = 'start start'
    fxLayoutGap = '15px'>
  <mat-form-field
      fxFlex = '100%'>

    <mat-select
        #multiSelect
        [formControl] = "multiOptionCtrl"
        [multiple] = "true"
        [placeholder] = 'placeholder'>
      <ngx-mat-select-search
          [formControl] = "multiOptionCtrl"></ngx-mat-select-search>
      <mat-optgroup
          *ngFor = "let group of multiOptionsFilter | async"
          [label] = "group.name">
        <ng-content  select = 'mat-icon'></ng-content>
        <mat-option
            *ngFor = "let option of group.options"
            [value] = "option.value">
          <mat-icon
              [svgIcon] = 'option?.icon'
              class = 'mrg-rt-5px'
              color = 'accent'></mat-icon>
          {{option.viewValue}}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</form>

Note the

<ng-content  select = 'mat-icon'></ng-content>

transclusion.

Here is how I instantiate the component

<nhncd-mat-multi-select-group
    (eventData) = 'getCause($event)'
    [placeholder] = '"Aetiology | Cause"'
    [groups] = '(rs$ | async)["haemoptysis"]'
    fxFlex = '100%'>

    <mat-icon
        [svgIcon] = 'booster1'
        class = 'mrg-rt-5px'
        color = 'accent'>
    </mat-icon>
</nhncd-mat-multi-select-group>

I would like the icon to be placed as shown in the graphic

However, I am not seeing the icon anywhere. Any help is appreciated.

Cheers