[SalesForce] Custom html label in lightning:button

Is there any way to add a custom label that contains HTML in a lightning button?

I tried:

<lightning:button onclick="{!c.backToTrx}">
    <aura:set attribute="label" value="<span class='fa fa-arrow-circle-back'/> Back"/>
</lightning:button>

but I get the error that

Error:(1, 1) FIELD_INTEGRITY_EXCEPTION – 0Ad39000000PJaP:201,60: ParseError at [row,col]:[202,60]
Message: The value of attribute "value" associated with an element type "aura:set" must not contain the '<' character.: Source

Then I used html entity but the label was output as

<span class='fa fa-arrow-circle-back'/> Back

instead of the HTML

Using the aura:set I can set to any text I want. As you can probably tell I am trying to use font awesome font as an icon instead of the svg from slds.

Maybe there is a way to use lightning style and css to display? I am not that good with advanced css though so not even sure if it is possible.

Note I know I can build the entire component out using slds and regular html or do another component but it is not important enough to add component to the package or to forgo the lightning component to get this.

Second Note The nature of the request will not allow this to be done in the controller or helper. (It can be done but the code required to identify thy dynamic css and get the field, set the value etc is not worth the overhead

Best Answer

following your example, I uploaded a static resource, referencing it with lightning:require, for ex.

    <aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
        <ltng:require  styles="{!join(',',$Resource.awesomefonts + '/font-awesome-4.7.0/css/font-awesome.css', $Resource.awesomefonts + '/font-awesome-4.7.0/font/fontawesome-webfont.svg',)}" afterScriptsLoaded="{!c.doInit}" />

            <lightning:button aura:id="cssClass" onclick="{!c.doSomething}">
                <aura:set attribute="label" value="Back"/>
        </lightning:button>
    </aura:component>

and I added a class using $A.util.addClass as follows:

({
    doInit : function(cmp, event, helper) {
        var cmpTarget = cmp.find('cssClass');
        $A.util.addClass(cmpTarget, 'fa fa-arrow-circle-left');
    }
})

and Tada!

enter image description here

Related Topic