6

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 '19 at 19:52
4

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 '19 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
  • 1
    I'm not sure how you got it to work but in my component it doesn't
    – shlasasha
    Dec 20 '19 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.