lightning:card Icon size

Question

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!

Answer 1

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.

Answer 2

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;
}

with 2rem

with 5 rem

Answer 3

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>