ag-Grid，使用材质图标进行单元格渲染 - vue

Question

我在 vuejs 项目中使用 ag-Grid。 我想渲染单元格以显示材质图标， 但是图标没有出现，只出现了图标名称：

这是“iconRender”组件：

function iconRender(params) {
  var spanElement = document.createElement("span");
  var textElement = document.createElement("span");
  textElement.innerHTML = params.value;
  var iconElement = document.createElement("i");
  iconElement.class = "material-icons";
  iconElement.style.color = params.color;
  iconElement.innerHTML = params.icon;
  spanElement.appendChild(iconElement);
  spanElement.appendChild(textElement);
  return spanElement;
}

这是 columnsDef:

 gridColumns() {
      return  [
          {  headerName: "Status",  field: "status", cellRenderer: 'iconRender', 
          cellRendererParams: (params) => { return {icon :'check_circle_outline', color: 'green'}}},
         ]
         }

我还在 index.html 文件中添加了 head 标签：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

当使用 ag-Grid 之外的 material-icon 时，它可以正常工作

Answer 1

而不是 iconElement.class = "material-icons";

写 iconElement.className="material-icons";