3

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?

Improve this question
1
  • 1
    With CSS you can do it with padding, example padding: 0.3rem;
    – Raul
    Commented Aug 22, 2019 at 13:29

1 Answer 1

Reset to default
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;
}
Improve this answer
1
  • Note. this also works for Aura.
    – PartOfTheOhana
    Commented 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 .