setTabIcon() for Lightning Experience | Salesforce Console Developer Guide

Arguments

Name	Type	Description
tabId	string	The ID of the tab for which to set the icon.
icon	string	An SLDS icon key in the format `utility:iconName` where `utility` is the icon category. See a full list of utility icons on the SLDS reference site.
iconAlt	string	Optional. Alternative text for the icon.

LWC Sample Code

This component has a function that sets an icon on a specified tab. It uses the tabId property from getFocusedTabInfo().

1import { LightningElement, wire } from 'lwc';
2import {
3    IsConsoleNavigation,
4    getFocusedTabInfo,
5    setTabIcon
6} from 'lightning/platformWorkspaceApi';
7
8export default class SetTabIconExample extends LightningElement {
9    @wire(IsConsoleNavigation) isConsoleNavigation;
10
11    async setTabIcon() {
12        if (!this.isConsoleNavigation) {
13            return;
14        }
15
16        const { tabId } = await getFocusedTabInfo();
17        setTabIcon(tabId, 'utility:einstein', {
18            iconAlt: 'Account Insights'
19        });
20    }
21}

For another example that uses setTabIcon(), see the workspaceAPISetTabIcon component in the lwc-recipes repo.

To make your component available for use in a Lightning console app, specify the lightning__AppPage target in the component’s configuration file.

Aura Components Sample Code

This component has a button that, when pressed, sets the icon of the focused tab to the SLDS “Approval” action icon.

Component code:

1<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
2    <lightning:workspaceAPI aura:id="workspace" />
3    <lightning:button label="Set Focused Tab Icon" onclick="{! c.setFocusedTabIcon }" />
4 </aura:component>

Controller code:

1({
2    setFocusedTabIcon : function(component, event, helper) {
3        var workspaceAPI = component.find("workspace");
4        workspaceAPI.getFocusedTabInfo().then(function(response) {
5            var focusedTabId = response.tabId;
6                workspaceAPI.setTabIcon({
7                tabId: focusedTabId,
8                icon: "action:approval",
9                iconAlt: "Approval"
10            });
11        })
12        .catch(function(error) {
13            console.log(error);
14        });
15    }
16})

Response

This method returns a promise that, upon success, resolves to a tabInfo object representing the modified tab. A tabInfo object is a JSON array of information about a workspace tab, with nested arrays of information on each subtab. This is the structure of a tabInfo object.

1{
2     tabId: string,
3     url: string (URL),
4     pinned: boolean,
5     closeable: boolean,
6     title: string,
7     icon: string (SLDS iconKey),
8     iconAlt: string,
9     customTitle: string (optional),
10     customIcon: string (optional),
11     customIconAlt: string (optional),
12     highlighted: boolean,
13     pageReference: object,
14     isSubtab: boolean,
15     parentTabId: string,
16     subtabs: [
17         {
18             tabId: string,
19             url: string (URL),
20             pinned: boolean,
21             closeable: boolean,
22             title: string,
23             icon: string (SLDS iconKey),
24             iconAlt: string,
25             customTitle: string (optional),
26             customIcon: string (optional),
27             customIconAlt: string (optional),
28             highlighted: boolean,
29             pageReference: object,
30             isSubtab: boolean,
31             parentTabId: string,
32             focused: boolean,
33             recordId: string,
34          },
35           ... 
36     ],
37     focused: boolean,
38     recordId: string
39}