<h2 class="slds-badge" >
     <lightning-icon  icon-name="utility:clock" alternative-text="clock" size="xx-small"> </lightning-icon>
     <span class="slds-p-around"> blah blah blah</span>

^^^ my third attempt at trying to get "blah blah blah" to not appear immediately next to the clock icon.

What the heck am I talking about?

Let the number 1 represent the clock icon, and let the number 2 represent the text. The result of this code looks like:


and I want it it look like: 1 2

See the diff? Space. Space is the difference between 12 and 1 2.

Please god let there be someone how there that knows how to get a space to be rendered between the text and the icon.

1 Answer 1


instead of padding, try adding a margin, you can do so as documented in the SLDS docs

You must log in to answer this question.

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