Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
David Torres 30David Torres 30 

LWC lightning-card with custom icon

Is there a way I can use a lightning-card in LWC using a custom icon? 
<lightning-card title="Related JIRA Issues" icon-name="standard:lightning_component">
</lightning-card>

 
Best Answer chosen by David Torres 30
Pruthiviraj GanePruthiviraj Gane
  1. Create your icon in a PNG Image.
    • User-added image
  2. Store the PNG Image in Static Resource. 
    • User-added image
  3. In lightning component - use below code to show the icon in the card

Component  - HTML File
  
<template>
    <lightning-card>
        <h3 slot="title">
            <img src={lampPng} alt="lampIcon" class="customIcon">
            Card Title - 1 
        </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>

Component - JS File
  
import { LightningElement } from 'lwc';

import myPNG_icon from '@salesforce/resourceUrl/lampSVg';

export default class CardWithIcon extends LightningElement {
    lampPng = myPNG_icon;
}

Component - CSS File ( Style the icon as per your design )
  
.customIcon{
    width: 24px;
    height: 30px;
    margin: 10px;
}

Please let me know if this solution works for you or not. 


 

All Answers

Danish HodaDanish Hoda
Hi David,
Custom as in your own, like the one we use in SVG file in Lightning components?

If it is, you can create a folder in your LWC folder as SVG and it will work exactly the same as that in Aura:components.
Pruthiviraj GanePruthiviraj Gane
  1. Create your icon in a PNG Image.
    • User-added image
  2. Store the PNG Image in Static Resource. 
    • User-added image
  3. In lightning component - use below code to show the icon in the card

Component  - HTML File
  
<template>
    <lightning-card>
        <h3 slot="title">
            <img src={lampPng} alt="lampIcon" class="customIcon">
            Card Title - 1 
        </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>

Component - JS File
  
import { LightningElement } from 'lwc';

import myPNG_icon from '@salesforce/resourceUrl/lampSVg';

export default class CardWithIcon extends LightningElement {
    lampPng = myPNG_icon;
}

Component - CSS File ( Style the icon as per your design )
  
.customIcon{
    width: 24px;
    height: 30px;
    margin: 10px;
}

Please let me know if this solution works for you or not. 


 
This was selected as the best answer