How to add an icon to group by rows in Angular DevExpress DataGrid?

I'm working on an Angular project where I am using the DevExpress DataGrid component. I want to add an icon to the rows that appear when the data is grouped by a certain column. Specifically, I'd like to display a custom icon next to the group headers.

Like this image:

Code:

<dx-data-grid #dataTable
                          [dataSource]="primengDatatableHelper.records"
                          [columnAutoWidth]="true"
                          keyExpr="taskTicketId"
                          showBorders="true"
                          height="auto"
                          [scrolling]="{useNative:true}"
                          [allowColumnReordering]="true"
                          noDataText="{{l('NoData')}}"
                          [rowAlternationEnabled]="true"
                          [(remoteOperations)]="{ sorting: true }"
                          (onOptionChanged)="onOptionChanged($event)">

                <dxo-column-chooser [enabled]="true"
                                    [title]="l('HiddenColumns')"
                                    [emptyPanelText]="l('DragColumnHere')">
                </dxo-column-chooser>

                <dxo-group-panel [visible]="false">
                </dxo-group-panel>

                <dxo-grouping [autoExpandAll]="false"
                              [allowCollapsing]="true"
                              [contextMenuEnabled]="true"
                              expandMode="buttonClick">
                </dxo-grouping>

                <dxo-pager [showPageSizeSelector]="true"
                           [allowedPageSizes]="devExtremeDatatableHelper.predefinedRecordsCountPerPage"
                           [showInfo]="true"
                           [visible]="true"
                           infoText="{2} {{l('DailyOperations')}}">
                </dxo-pager>

                <dxo-summary>
                    <dxi-group-item column="userName"></dxi-group-item>
                </dxo-summary>

                <dxi-column *ngIf="!isHiddenElement('daily-operations-dataGrid-column-user')"
                            dataField="userFullName"
                            [groupIndex]="1"
                            caption="{{l('User')}}">
                </dxi-column>

Here’s how you can add an icon to group by rows in an Angular DevExpress DataGrid:

// html file
    <dx-data-grid
        (onCellPrepared)="onCellPrepared($event)">
        <!-- your data grid configuration -->
    </dx-data-grid>


// ts file
    onCellPrepared(e: any) {
            if (e.rowType === 'group' && e.column.dataField == "userFullName") {
                const iconButton = document.createElement('i');
                iconButton.className = 'fa fa-map cursor-pointer'; // Add your desired icon class
                iconButton.style.marginLeft = '10px';
                // iconButton.classList.add('icon-button');
                iconButton.addEventListener('click', (event) => {
                    event.stopPropagation();
                    //this.onIconButtonClick(e.data);
                    this.showUserClients(e.data.key);
                });
    
                console.log(e);
                e.cellElement[0].appendChild(iconButton);
            }
        }