0

I've Googled, I've tried to read their docs (which are kinda thin imo. I can't find any actual "reference" docs anywhere), etc., and no joy.

I'm just trying to add a icon-checkbox into an html element in my survey json model.. with some text after it. e.g. [√] Thanks for completing this questionnaire!

I was trying to use an Angular Material icon, but if SurveyJs has some built-in, all the better. But again, I can't find any actual usage examples.

TIA! :D

Scott Fraley
  • 378
  • 4
  • 14

2 Answers2

0

actually in docs ,seems them only offer to replace a icon to other like:

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";
Hanshan
  • 21
  • 4
0

The question duplicates the following GitHub issue: https://github.com/surveyjs/survey-library/issues/6456.

Solution: To use built-in icons, include them to HTML content as follows: <svg><use href="#icon-name"></use></svg>.

<svg><use href="#icon-v2check_24x24"></use></svg>

For instance, the following code references the V2Check_24x24 icon in a completedHtml property:

export const json = {
  completedHtml:
    '<svg><use href="#icon-v2check_24x24"></use></svg><p><h4>Thank you!&nbsp;&nbsp;Your response has been submitted.&nbsp;&nbsp;Please allow 20 business days for screening.&nbsp;<br />You will receive an email once your application has been processed.</h4></p>',
  elements: [
    ...
  ]
};

image

Built-in cons are available as a part of the currently applied theme. For instance, icons available with the Default V2 theme are placed in the following folder: https://github.com/surveyjs/survey-library/tree/0be44aef43c62f5790bd0c7d56e63b57aa780687/src/images.

You can also review how icons are referenced in defaultV2Css.ts.

You can also use custom icons. To register a custom SVG icon and use it in a survey, use the SvgRegistry.registerIconFromSvg method. For instance, the following code registers a custom SVG icon with the icon-test id.

import { SvgRegistry } from "survey-core";

var svg =
  '<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.35 1.34999L10.65 0.649994L6.05002 5.24999L1.35002 0.649994L0.650024 1.34999L5.25002 6.04999L0.650024 10.65L1.35002 11.35L6.05002 6.74999L10.65 11.35L11.35 10.65L6.75002 6.04999L11.35 1.34999Z"/></svg>';

SvgRegistry.registerIconFromSvg("icon-test", svg);

View Demo

JaneJane
  • 121
  • 3