2

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

1

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

  • Yea, I cannot do it in JS as I have several places in an iteration that I am doing this based on values from the record in the controller. For this use case I need to be able to "dynamically" do it. Appreciate the assist though. – Eric Sep 6 '17 at 5:26
  • Also, in order for the fa icon to not mess up the button css it needs to be in its own <span> with the label outside the span. Maybe I can use append – Eric Sep 8 '17 at 5:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.