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

Question

I'm using ag-Grid in vuejs project. I want to render cells to display material icons, but the icon doesn't appear, only the icon name appears:

This is the 'iconRender' component:

 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; }

This is the columnsDef:

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

I also added to index.html file under head tag:

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

When using material-icon out of ag-Grid it works properly

Answer 1

Instead of iconElement. class = "material-icons";

write iconElement. className = "material-icons";