Angular cellRenderer ag栅格不渲染mat图标标记

我有3列的ag网格，最后一列我想显示材质图标编辑。这是我的骗局

<ag-grid-angular 
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
[components]="getIconErrorRenderer"
[paginationPageSize]=pageSize>
</ag-grid-angular>

editIndicator尝试将mat图标添加到单元格中，但它不起作用

editIndicator(params) {
  var eDiv = document.createElement('div');
  eDiv.innerHTML = '<span class="my-css-class"><mat-icon class="btn-simple page-icon">login</mat-icon></span>';
  var eButton = eDiv.querySelectorAll('.btn-simple')[0];

  eButton.addEventListener('click', function() {
      console.log('button was clicked!!');
  });

  return eDiv;
  }

editIndicator（参数）{
var eDiv=document.createElement（'div'）；
eDiv.innerHTML='login'；
var eButton=eDiv.querySelectorAll（'.btn simple'）[0]；
eButton.addEventListener（'click'，function（）{
log（'按钮被点击了！！'）；
});
返回eDiv；
}

但是这个mat图标标签不工作，它没有显示图标，如何解决这个问题

---

您是否尝试过像这样使用单独的组件？

editIndicator(params) {
  var eDiv = document.createElement('div');
  eDiv.innerHTML = '<span class="my-css-class"><mat-icon class="btn-simple page-icon">login</mat-icon></span>';
  var eButton = eDiv.querySelectorAll('.btn-simple')[0];

  eButton.addEventListener('click', function() {
      console.log('button was clicked!!');
  });

  return eDiv;
  }