[SalesForce] place the icon in front of the lightning-card header

I have the following code in the html of the LWC component and I want to replace the standard icon in it with the one that I downloaded and added to static resources? But I can't do it, the icon is located below the title level. Is it possible or should I use something else instead of the lightning-card?

//before

    <lightning-card icon-name="utility:flow" title="Wind Speed">
        <div class="slds-align_absolute-center color-grey">
            <template if:true={result}>
                <div class='wind'>{getCurrentWindSpeed}</div>
            </template>
        </div>
    </lightning-card>

enter image description here

//after

<img src={windIcon} alt="windIcon" class="windIcon">
<lightning-card title="Wind Speed">
    <div class="slds-align_absolute-center color-grey">
        <template if:true={result}>
            <div class='wind'>{getCurrentWindSpeed}</div>
        </template>
    </div>
</lightning-card>

enter image description here

Best Answer

You can use slot="title" to define a custom title section. See this example from the documentation

<template>
  <lightning-card>
    <h3 slot="title">
        <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
        Card Title
    </h3>
    <div slot="footer">
            <lightning-badge label="Tag1"></lightning-badge>
            <lightning-badge label="Tag2"></lightning-badge>
            <lightning-badge label="Tag3"></lightning-badge>
    </div>
    <p class="slds-p-horizontal_small">Card Body (custom component)</p>
  </lightning-card>
</template>

https://developer.salesforce.com/docs/component-library/bundle/lightning-card/example

Then replace the lightning-icon they have with your own icon styled via SLDS https://lightningdesignsystem.com/components/icons/

Related Topic