openlayers3 - Set Node as label for ol.control.FullScreen control

Question

I'm trying to set custom span ( <span class="fa fa-expand"></span> ) as the label of the openlayers 3 FullScreen control.

According to the documentation, this should be possible. The documentation states:

label string | Node | undefined experimental

Text label to use for the button. Default is \⤢ (NORTH EAST AND SOUTH WEST ARROW). Instead of text, also a Node (eg a span element) can be used.

I tried setting the label like this:

let fullScreenControl = new ol.control.FullScreen({
     className: 'fullScreen-button',
     label: '<span class="fa fa-expand"></span>'
});

But this seems to html encode my tag. When I check the generated button in the developer console, it adds <span> ...

Can somebody guide me on how to set a "Node" as a label or in general the correct way to set a custom span as the label of the control? Thanks

Answer 1

You need to create an element object:

var mySpan = document.createElement("span");
mySpan.className = "fa fa-expand";

var fullScreenControl = new ol.control.FullScreen({
  className: 'fullScreen-button',
  label: mySpan
});