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!
    – Hemavantha Rajesh Varma Mudunu
    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.
    – Hemavantha Rajesh Varma Mudunu
    Nov 6, 2018 at 15:58
  • Dear downvoter would love to understand the reason for downvote!
    – Hemavantha Rajesh Varma Mudunu
    Nov 6, 2018 at 17:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .