0

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

https://www.lightningdesignsystem.com/components/badges/#Badges-with-Icons

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" />
Improve this question
2
  • ootb, for a similar functionality, you might want to take a look at lightning:pillContainers
    – glls
    Nov 6, 2018 at 15:43
  • So basically, i use pills without the remove option right?
    – Dylan
    Nov 6, 2018 at 15:48

2 Answers 2

Reset to default
2

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"/>
    </aura:set>
</lightning:pill>

some styling is needed to hide the remove option though:

.THIS .slds-pill__remove{
    display:none;
}

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

Improve this answer
5
  • +1 from me. I like this idea better!
    – codeyinthecloud
    Nov 6, 2018 at 15:58
  • Good answer!! but the CSS may is like that ----> .THIS .slds-pill__remove { display: none !important; }
    – Dylan
    Nov 6, 2018 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, 2018 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, 2018 at 16:20
  • i retested using .slds-pill__remove without !important, and it works
    – glls
    Nov 6, 2018 at 16:24
0

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>
    </span>Icon on the left</span>
Improve this answer
3
  • =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, 2018 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, 2018 at 15:58
  • Dear downvoter would love to understand the reason for downvote!
    – codeyinthecloud
    Nov 6, 2018 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.