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.

| improve this answer | |
  • +1 from me. I like this idea better! – codeyinthecloud 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>
| improve this answer | |
  • =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. – codeyinthecloud Nov 6 '18 at 15:58
  • Dear downvoter would love to understand the reason for downvote! – codeyinthecloud 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.