Я использую 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 все работает правильно