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>
//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>
Best Answer
You can use
slot="title"
to define a custom title section. See this example from the documentationhttps://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/