I saw on Lightning design system that there is the option to put an icon inside a Badge


How can i actually do it in lightning component? I was looking for a way to put an icon inside this tag:

<lightning:badge label="Privacy OK" class="slds-theme_success" />
  • ootb, for a similar functionality, you might want to take a look at lightning:pillContainers
    – glls
    Nov 6 '18 at 15:43
  • So basically, i use pills without the remove option right?
    – Dylan
    Nov 6 '18 at 15:48

Similar, although not the same component, the lightning:pill supports adding icons within it:

<lightning:pill label="Pill Label">
    <aura:set attribute="media">
        <lightning:icon iconName="standard:account"  alternativeText="Account"/>

some styling is needed to hide the remove option though:

.THIS .slds-pill__remove{

Otherwise, you will have to tweak the SLDS Badge Blueprint - similar to what @codeyinthecloud posted.

  • +1 from me. I like this idea better! Nov 6 '18 at 15:58
  • Good answer!! but the CSS may is like that ----> .THIS .slds-pill__remove { display: none !important; }
    – Dylan
    Nov 6 '18 at 16:15
  • 1
    !important is never a good idea (bad practice) you just need to get the selector right, the above one i posted worked properly, not sure where you are applying the css rule
    – glls
    Nov 6 '18 at 16:16
  • Right! but your way just hide it, and you can still see it when u go hover with the mouse.
    – Dylan
    Nov 6 '18 at 16:20
  • i retested using .slds-pill__remove without !important, and it works
    – glls
    Nov 6 '18 at 16:24

As svg are not yet supported you can wrap a lightning:icon with the slds styling. You will have to fine tune the styling a little bit.

<span class="slds-badge slds-badge_lightest">
    <span class="slds-icon_container slds-icon-utility-world slds-m-right_xx-small" title="Description of icon when needed">
        <span class="slds-icon slds-icon_xx-small slds-icon-text-default">
            <lightning:icon iconName="utility:world" size="small" />
    </span>Icon on the left</span>
  • =P id say more than a little bit considering the minimum size supported by the lightning icon, and seting a min-width to it will screw up the dimensions and so on, but do-able .
    – glls
    Nov 6 '18 at 15:56
  • @glls I agree. The idea here is to show an alternative to svg hosting the icon on a badge. Nov 6 '18 at 15:58
  • Dear downvoter would love to understand the reason for downvote! Nov 6 '18 at 17:38

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.