Hello Maryess,
The Gantt component uses a custom icon font called wx-icons, hosted on our CDN. The @font-face declaration loads wx-icons.woff and wx-icons.woff2. You can see it here: https://cdn.svar.dev/fonts/wxi/wx-icons.css
All icons are rendered using i elements with classes like wxi-plus, wxi-menu-down, wxi-close, wxi-close etc., and they rely on the wx-icons font family.
If you’re fine with the original icon set but need to bypass the CDN, you can just host the font files yourself.
For that you need to:
1.Download the two font files from the CDN:
2.Place them in your project, e.g., in public/fonts/.
3.Create a local CSS file (or override in your own stylesheet) with an updated @font-face that points to your local copies:
@font-face {
font-family: "wx-icons";
src: url("/fonts/wx-icons.woff2?7fe20e38f1cf00b4ee372a309a4eb44c") format("woff2"),
url("/fonts/wx-icons.woff?7fe20e38f1cf00b4ee372a309a4eb44c") format("woff");
}
Copy all the icon class rules (.wxi-plus:before etc.) into your local CSS from here https://cdn.svar.dev/fonts/wxi/wx-icons.css as well, or simply include the full wx-icons.css locally after adjusting the font paths.
If you want to completely change the icons to your own set (for example, using inline SVGs or a different icon library), you can override the CSS classes that Gantt uses.
You can find the exact class names currently used in the Gantt by inspecting the DOM.
To replace them with your own SVG icons, you can write CSS like this:
.wxi-plus::before {
content: '';
background-image: url('/icons/plus.svg');
background-size: contain;
background-repeat: no-repeat;
}
And also please add more specificity to the applyed styles to override them.
If you prefer another icon font (like Font Awesome, Material Icons), you can write a CSS alias.
For instance:
.wxi-plus::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f067";
}
You would need to do this for every icon you use.
