How to render mdi-icons in the grid

Hi there,

I was able to render an tag in the grid, however, I would like to render icons from material design icons. Is it possible?
I attached a print screen showing what I am trying to do.

To render icons in the grid, you can add div element inside the template of data presentation in a column and set the required icon using CSS. … esentation


Hi Polina,

Is this the only way to render icons in the grid?

I have a component that I use to render these icons, and I have to set some parameters to it:

<SvgIcon icon={item.farolAcao.icone} size={20} color={item.farolAcao.cor} colorHover={item.farolAcao.cor}/>

If I use it as a string like you are doing in your example, the component won’t be rendered.

Any other idea?

Hello there, is there any solution for the last question? I am able to inject the static html code/image… but i need to use material UI icon components. Is there any way to use MUI components on the columns?

You can show any HTML elements in the grid and they can be dynamic. Here are another examples with the images:
And this example shows how to display an SVG-file:

Thank you for the response Ramil

What about the React components? Can it be injected as a custom content? Want to use React Material UI bars/buttons/avatar… etc on the task columns

Unfortunately, there is no built-in support for the React components and functions inside Gantt. If you try to do that, you will get only the regular HTML elements.