8

Is there a way to set icon size? Like in this example:

<lightning:card iconName="action:flow" title="My beautiful title">

Is there an equivalent of

class="slds-icon_xx-small"

I have tried

iconName="action:flow_xx-small" 

but it doesn't work :( Thank you!

1
  • standard icons are smaller than action
    – shlasasha
    Dec 20, 2019 at 19:52

3 Answers 3

5

You can add a lightning icon in with a slot of media inside the card like so

<lightning:card title="My beautiful title">
    <lightning:icon
        slot="media"
        iconName="action:flow"
        size="x-small"
    ></lightning:icon>
</lightning:card>

you can set the icon size by updating the size attribute to any of the following: xx-small, x-small, small, medium, or large. This value defaults to medium.

1
  • This makes icon independently of title, and puts it on separate line. Can be used as workaround.
    – shlasasha
    Dec 20, 2019 at 16:13
3

you can achieve with custom CSS as shown in below, here is tested code.

CMP

<lightning:card iconName="action:new_child_case" class="myUniqueClass">
      <aura:set attribute="title">
                           <b>Cases (1)</b>
                       </aura:set>
     </lightning:card>

CSS

.THIS .myUniqueClass svg {
width: 5rem;
height: 5rem;
}

enter image description here with 2rem

enter image description here with 5 rem

1
  • 2
    I'm not sure how you got it to work but in my component it doesn't
    – shlasasha
    Dec 20, 2019 at 16:14
2

Here's how you would do it with LWC - are you able to abstract it for aura? (Link to playground: https://playground.lwcjs.org/projects/TCCep0y0/1/edit )

 <template>
    <lightning-card>
        <div slot="title">
        <lightning-button-icon slot="actions" icon-name="action:flow" size="xx-small" class="slds-m-right_x-small"></lightning-button-icon>
        This is a title</div>
    </lightning-card>
 </template>

You must log in to answer this question.

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