How to make a glyphicon clickable on a button - xpages

Question

In my native Notes development I have a button on which I have defined a icon from the resources. Then in the have an onclick event. Want to make this a bootstrap button with an onclick so I add a link action to it that performs the action. If I add text to the link that displays in the button then when I click on the text the action takes place but I just want the glyphicon and make it the clickable part of the button
<div class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-chevron-down"></span>
<xp:link id="expandLink" >
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="thisValue">
<xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
</div>
if I change it and add the text to the link it works but only if I click on the text:
<div class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-chevron-down"></span>
<xp:link id="expandLink" text="Expand">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="thisValue">
<xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
</div>
If I have to add the text then the icon is kind of unnecessary.
Is there a way to add a glyphicon to a link to make the icon clickable or ????

Answer 1

You can add the Glyphicon to a xp:button. Try something like this:
<xp:button value="Expand" id="button1" styleClass="btn btn-success btn-sm">
<span class="glyphicon glyphicon-chevron-down"></span>
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="thisValue">
<xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
</xp:eventHandler>
</xp:button>

Answer 2

There is an xp:span component, which should allow you to add an eventHandler to it. Maybe if you use that and an xp:text instead of an xp:link, it will achieve what you want.