ag-Grid, cell rendering with material-icons - 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";