Render icon

[AndrewTraub]

This is my css (which works fine):
[class]:after {
--icon: "\f2ed";
content: var(--icon);
...
}

This is the javascript I need to change the icon variable:
this.icon = "\f2ee";
this.div.classList.add(`--icon:${this.icon}`);

but if "\f2ed" is passed, the "\f" is removed and an error thrown. I'm sure I'm missing something simple to prevent the \f being stripped so if someone has a quick fix, I'd appreciate it.

[Jason Knight]

You've got some problems.

1) Object.icon is not the CSS variable (unless you've done something funky

2) Not sure you need to be setting a class there.

3) \f is a JavaScript escape sequence for a "form feed". To store the slash in the string so that CSS will get it, you need to double-slash to get an escaped slash.



https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_sequences

See how \\ escapes a single slash, and \f is a form feed?

What you should be doing is along the lines of:

Code: [Select]

this.div.style.setProperty("--icon", "\\F2ED");

You also have the problem of setting the var --icon on the :after instead of the parent, making it harder to override. But then that [class] thing throws up all sorts of warning flags for me.