From MDN DOCS: Here you can get all the info you need about data- attribute in general.

The syntax is simple. Any attribute on any element whose attribute
name starts with data- is a data attribute.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

I just encountered an attribute called “data-icon” that I’ve never seen before, so I started fiddling with the values and noticed that different letters will yield different icons. Is there a reference page for this attribute somewhere that lists all the value:icon combinations? I tried googling data-icon and wasn’t able to find anything about it.

  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle"></button>
    <button class="stop" data-icon="S" aria-label="stop"></button>
    <div class="timer"><div></div><span aria-label="timer">00:00</span></div>
    <button class="rwd" data-icon="B" aria-label="rewind"></button>
    <button class="fwd" data-icon="F" aria-label="fast forward"></button>
  </div>