How to set icon content of pseudo element by its attribute?

Question

I'm using icomoon as my icon library

And I'm trying to dynamically set icons by the attribute data-icon.

But it seems the content can't be recognized as a charset using attr(data-icon).

Is there a way to make \e92c as a character rather than string literal using attr()?

#expected::before {
  content: '\e92c';
  font-family: 'icomoon';
}

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'icomoon';
}

<h2>This is what I expected</h2>
<a class="button" id="expected" href="javascript: void(0)">Save</a>

<h2>This is what I get :(</h2>
<a class="button" data-icon="\e92c" href="javascript: void(0)">Save</a>

Answer 1

HTML text is escaped differently from CSS text. In the attribute, you want  for the equivalent hex excape (what the spec calls a "decimal character reference" or a "hexadecimal character reference;" details here).

Hexadecimal character reference (note the x after the #):

data-icon=""

Decimal (no x):

data-icon=""

Live example:

#expected::before {
  content: '\00e92c';
  font-family: 'icomoon';
}

[data-icon]::before {
  content: attr(data-icon);
  font-family: 'icomoon';
}

<h2>This is what I expected</h2>
<a class="button" id="expected" href="javascript: void(0)">Save</a>

<h2>From <code>data-icon</code></h2>
<a class="button" data-icon="&#xE92C;" href="javascript: void(0)">Save</a>