Element Studio: Icon field yields console error in builder

[Nicscott01]

I'm building a Google Maps element that plots points on a map given a repeater of locations. The basic functionality works.

I've gone the next step to add an icon field for each location so you can use a BD icon to represent it, instead of the typical Google red pin.

The problem is, in the builder, when you have any icon loaded in a field, there's a syntax error:

SyntaxError: Unexpected identifier 'http' at <anonymous>:4:11 at <anonymous>:30:9 at v (js-in-head.ts:171:35) at o (registrations.ts:201:7) at registrations.ts:385:9 at store-actions.ts:138:13

This error prevents the rest of the JS to run for loading the map, so visual editing dies.

If you save the page, and then view on the front end, the SVG icon loads fine on the map without any errors.

Is this a known issue with the icon field? Does anybody have any insight?

[Nicscott01]

Steps to reproduce:

1. Create a new Element in the Element Studio
2. Add a control with Icon as the type
3. On the property change, include this code:

var icon = {{ content.data.icon|json_encode }}; console.log( icon );

4. View the console error each time you pick a new icon.

If you change the code to access the svgCode property, you'll get a new error.

var icon = {{ content.data.icon.svgCode }}; console.log( icon );

SyntaxError: Unexpected token '<' at <anonymous>:4:11 at <anonymous>:14:9 at v (js-in-head.ts:171:35) at o (registrations.ts:201:7)

[Nicscott01]

As I continue to fiddle with this, I think the issue has to do with escaping the

[Nicscott01]

I was able to work around this by using data-attributes within the html, and then reference the data via JS.