UI Icons
This help topic describes icons built into SurveyJS components and shows how you can replace them with custom icons.
Built-In Icons
SurveyJS uses icons in SVG format. The following built-in SVG icons are available:
The following code shows how you can swap two built-in icons. It uses the icon-export icon instead of icon-import, and vice versa:
Survey.settings.customIcons["icon-import"] = "icon-export";
Survey.settings.customIcons["icon-export"] = "icon-import";
// In modular applications:
import { settings } from "survey-core";
settings.customIcons["icon-import"] = "icon-export";
settings.customIcons["icon-export"] = "icon-import";
Custom Icons
If you want to replace a built-in icon with a custom SVG icon, call the registerIconFromSvg method on the SvgRegistry object. Pass the name of the built-in icon as the first argument and the custom icon markup converted to a string as the second argument. In the following code, a custom icon replaces the icon-delete icon:
const creator = new SurveyCreator.SurveyCreator(creatorOptions);
fetch("./my-icon.svg")
.then(response => response.text())
.then(svg => {
Survey.SvgRegistry.registerIconFromSvg("icon-delete", svg);
creator.render("creatorElement");
});
// In React:
import { SvgRegistry } from "survey-core";
import { ReactComponent as MyIcon } from "./my-icon.svg";
import ReactDOMServer from "react-dom/server";
const svg = ReactDOMServer.renderToString(<MyIcon />);
SvgRegistry.registerIconFromSvg("icon-delete", svg);