ag-Grid, рендеринг ячеек с иконками материалов - vue

Я использую ag-Grid в проекте vuejs. Я хочу визуализировать ячейки для отображения значков материалов, но значок не появляется, появляется только имя значка:

введите здесь описание изображения

Это компонент 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;
}

Это столбцыDef:

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

Я также добавил в файл index.html тег заголовка:

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

При использовании материальной иконки из ag-Grid все работает правильно


person user13982200    schedule 03.12.2020    source источник


Ответы (1)


Вместо iconElement.class = material-icons;

напишите iconElement.className= material-icons;

person user    schedule 06.12.2020