Display Icons in a Lightning Datatable in LWC

In Salesforce LWC data tables, it might be required to display icons for the field values in the respective rows or columns. The icons can be added for requirements, such as displaying different icons for different opportunity stages or showing active and inactive statuses.

In this Salesforce tutorial, we will learn how to display icons in a Lightning data table in LWC. In the examples, we will add the dynamic and static icons based on specific criteria in the data table.

Add Icons to the Salesforce Lightning Data Table in LWC

In Salesforce LWC components, we have a built-in icon display feature that can be accessed through the “lightning-icon” component, which allows us to use the standard Salesforce Lightning Design System (SLDS) icons in the LWC data table by specifying the icon-name attribute.

We can add icons to the LWC Lightning data table with static and dynamic icons. In the examples below, we will see both.

• Display Static Icons in a Lightning Datatable in LWC
• Display Dynamic Icons in a Lightning Datatable in LWC

Display Static Icons in a Lightning Datatable in LWC

To display static Salesforce icons, I will create an LWC table that fetches the opportunity records dynamically and displays the standard Opportunity icon in the table column.

1. Enter the code below in the Apex controller class to fetch the opportunity records in the data table.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, StageName, Amount 
                FROM Opportunity 
                LIMIT 20];
    }
}

2. After this, create an LWC component and enter the code below in the HTML template. This will render the data in the LWC data table.

<template>
    <lightning-card title="Opportunities with Static Icons">   
        <lightning-datatable
            key-field="Id"
            data={opportunities}
            columns={columns}
            hide-checkbox-column
        ></lightning-datatable>
    </lightning-card>
</template>

3. After this, enter the code below in the JS file, defining the logic of inserting the icon in the table column.

import { LightningElement, wire } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

const columns = [
    {
        label: 'Opportunity Icon',
        type: 'icon',
        fieldName: '',
        cellAttributes: { iconName: 'standard:opportunity' }
    },
    { label: 'Opportunity Name', fieldName: 'Name' },
    { label: 'Stage', fieldName: 'StageName' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' }
    
];

export default class StaticIconDatatable extends LightningElement {
    opportunities = [];
    columns = columns;

    @wire(getOpportunities)
    wiredOpportunities({ error, data }) {
        if (data) {
            this.opportunities = data; 
        } else if (error) {
            console.error('Error fetching opportunities:', error);
        }
    }
}

To add the standard opportunity icon, we have added a column in the Columns array with the label “Opportunity Icon“, and the type should be ‘icon.’ To display only the icon in the column, we have left the field blank as (fieldName: ‘ ‘). If you want to display the icon with the field value, then mention it in the fieldName parameter.

To get the standard opportunity icon, we used cellAttributes: { iconName: ‘standard:opportunity’ }. If you want to use any custom icon of a custom object, then it can be referred to as “custom:<icon_label>.”

4. Enter the code below in the meta.xml file to make the component available to the Lightning pages.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

5. After this, add the LWC component to the Lightning page.

After deploying the LWC component to the Lightning page, you will see the icons in the LWC table column.

This way, we can display static icons on an LWC data table in Salesforce using cellattribute with the proper icon name.

Display Dynamic Icons in a Lightning Datatable in LWC

The dynamic icons are displayed on the data table conditionally and change according to the changes in the record values.

For example, we have icons for different opportunity stages, and as we update the opportunity stage, the icon for the changed value should also be updated.

1. To create LWC data with dynamic icons, we will use the reference to utility icons.

We will use the controller class from the previous example, and the code for the JS file will be as shown below.

import { LightningElement, wire } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

const columns = [
    { label: 'Opportunity Name', fieldName: 'Name' },
    { label: 'Stage', fieldName: 'StageName' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' },
    {
        label: 'Stage Icon',
        fieldName: '',
        cellAttributes: { iconName: { fieldName: 'stageIcon' } }
    }
];

export default class DynamicIconDatatable extends LightningElement {
    opportunities = [];
    columns = columns;

    @wire(getOpportunities)
    wiredOpportunities({ error, data }) {
        if (data) {
            this.opportunities = data.map(opp => {
                let stageIcon;
                switch (opp.StageName) {
                    case 'Prospecting':
                        stageIcon = 'utility:search';
                        break;
                    case 'Qualification':
                        stageIcon = 'utility:question';
                        break;
                    case 'Closed Won':
                        stageIcon = 'utility:success';
                        break;
                    case 'Closed Lost':
                        stageIcon = 'utility:warning';
                        break;
                    default:
                        stageIcon = 'utility:info';
                }
                return {
                    ...opp,
                    stageIcon: stageIcon
                };
            });
        } else if (error) {
            console.error('Error fetching opportunities:', error);
        }
    }
}

For the logic of dynamic icons, we have added an icon column as ‘Stage Icon‘, the field name is blank to display icons in a separate column. Unlike static icons, we cannot mention all the icon values in the column array to fetch the icons.

We have referenced it as cellAttributes: { iconName: { fieldName: ‘stageIcon’ }, this stageIcon we have used to map the values of the stage values with the utility icon with the help of @wire decorator in the mapping this.opportunities = data.map.

We have mapped values, such as when the stage is Prospecting, the icon is ‘utility:search’, and similarly, all stage values are mapped.

Optionally, we can also centre the icons in the data table using “class: slds-align_absolute-centre“ under cellAttributes.

2. Enter the code below in the HTML file to render the data in the data table and the custom header.

<template>
    <lightning-card title="Opportunities with Dynamic Icons">
        <lightning-datatable
            key-field="Id"
            data={opportunities}
            columns={columns}
            hide-checkbox-column
        ></lightning-datatable>
    </lightning-card>
</template>

3. To make the component visible to the Lightning pages, enter the code below in the meta.xml file.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Deploy the LWC component to the Lightning page, and there, we will see the utility icons displayed in the column Stage Icon according to the opportunity stage value for specific records.

This way, we can display a dynamic column in the Salesforce LWC data table column by following the above steps.

If you want to display the icons in the existing column, like in this example, we can display icons in the Stage Name column along with the stage values. For this, we need to modify the code as follows.

const columns = [
    { label: 'Opportunity Name', fieldName: 'Name' },
    { label: 'Amount', fieldName: 'Amount', type: 'currency' },
    {
        label: 'Stage',
        fieldName: 'StageName',
        cellAttributes: { iconName: { fieldName: 'stageIcon' } }
    }
];

In the changes we made to display the icons in the field column, instead of showing them separately, we have changed fieldName from blank to StageName. Also, we have changed the label to the stage.

The label can be any custom label, but fieldName should be the correct API name of the field in which you have to display icons.

This way, we can add static and dynamic icons in the Salesforce Lightning LWC data table by following the above methods.

Conclusion

In this Salesforce tutorial, we have learned how to display icons in Salesforce LWC data tables. In the above example, we have displayed the static icons using the standard icon, and by using the Utility icons, we have displayed icons dynamically, where we added different icons for different opportunity stages.

By following the above examples, you can efficiently add icons statically and dynamically to the LWC Lightning data tables.

You may also like to read:

• Add Buttons in Salesforce LWC Datatable
• Row-Level Actions in LWC Datatable in Salesforce
• Pagination in Salesforce LWC Data Table
• Add Styling to a Salesforce Lightning Datatable in LWC
• Add Related Fields Columns in Salesforce LWC Data Table

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.