2

i am using lightning-icon and i want to decrease the size of it.

<lightning-icon icon-name="action:approval" size="xx-small"></lightning-icon>

The smallest size is xx-small, and i can't seem to make it any smaller. I tried modifying it in css, but it decreased only the background of the icon, without the icon itself.

How can i decrease the size of it?

1

1 Answer 1

8

You can add class and give appropriate padding to adjust reduce the icon within its container

HTML:

<lightning-icon class="my-icon" icon-name="action:approval" size="xx-small"></lightning-icon>

CSS:

.my-icon {
    padding: 0.1rem;
}
1
  • Note. this also works for Aura. May 29, 2020 at 17:56

You must log in to answer this question.

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