setTabIcon() for Lightning Experience

Sets the icon and alternative text of the specified tab. This method works only in Lightning console apps.

Arguments

Name	Type	Description
tabId	string	The ID of the tab for which to set the icon.
icon	string	An SLDS icon key. See a full list of icon keys 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.

1import { LightningElement, wire } from 'lwc';
2import { setTabIcon } from 'lightning/platformWorkspaceApi';
3
4export default class OpenTabExample extends LightningElement {
5  tabId = 'YourTabId';
6
7  handleClick() {
8    // Set an icon on a specified tab
9    setTabIcon(this.tabId, "action:approval");
10  }
11}

Example

The lwc-recipes repo has a workspaceAPISetTabIcon component that demonstrates usage of the setTabIcon() method.

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}

Salesforce Console Developer Guide