How to render mdi-icons in the grid

Gantt
#1

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.

gantt_icon.png1162×576 17.9 KB

#2

Hi,
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.
docs.dhtmlx.com/gantt/desktop__ … esentation

Demo:
snippet.dhtmlx.com/9580e5a14

#3

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?

#4

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?

#5

Hello,
You can show any HTML elements in the grid and they can be dynamic. Here are another examples with the images:
https://snippet.dhtmlx.com/ixkmjc1i
https://snippet.dhtmlx.com/8c4c967ca
https://snippet.dhtmlx.com/5/68a230b2c
http://snippet.dhtmlx.com/b3fea7565
And this example shows how to display an SVG-file:
https://snippet.dhtmlx.com/5/d136ddb11

#6

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

#7

Hello,
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.