6

I have a Console app with a custom Lightning page where I have set the tab icon and name using:

 workspaceAPI.setTabLabel({
                tabId: focusedTabId,
                label: a
            });
             workspaceAPI.setTabIcon({
                tabId: focusedTabId,
                 icon: "utility:description",
                 iconAlt: "Description",
             });

I am having trouble setting the size of the tab icon to small.

enter image description here

3 Answers 3

3

tl;dr - use "standard" icons

In case it is helpful for future readers, I was able to find a solution to this.

I was just building out an aura tab and encountered this same issue. While most icons appeared too large for the tab, I found that any icons selected from the "standard" category rendered correctly (in both size and color). The list of "standard" icons can be found here.

Code Example with Images

For example, in the setTabIcon method:

 workspaceAPI.setTabIcon({
    tabId: focusedTabId,
     icon: "utility:custom_apps",
     iconAlt: "Description",
 });

using an icon selection like this will render the icon incorrectly:

icon: "utility:custom_apps",

enter image description here

But using a standard icon will render the size and color appropriate for lightning tabs

icon: "standard:custom"

enter image description here

1
  • Nice find, what an absolutely terrible API lol
    – Andy Ray
    Sep 14, 2021 at 2:05
1

Only 3 parameters - tabId, icon, iconAlt are available for setting Icons setTabIcon and 2 parameters - tabId, label are available for setting label setTabLabel. You cannot change any other properties including size of icon. That will lead to disruption in the standard lightning experience and so that will not be allowed and not exposed.

3
  • So is there any workaround to make this icon smaller using javascript or maybe apply some css?
    – Akash
    Sep 4, 2019 at 12:24
  • Not possible as they will be in shadow DOM Sep 4, 2019 at 12:33
  • We have the same issue. Salesforce should ensure that tab icons are the same size, so I'd say this is salesforce bug. Of course, salesforce support may think differently :) they usually respond with "working as designed" Mar 31, 2020 at 9:36
0

You can do it by using the same tab icon and replacing 'utility' with 'standard'.

Previous code- workspaceAPI.setTabIcon({ tabId: focusedTabId, icon: "utility:custom_apps", iconAlt: "Description", });

Updated Code- workspaceAPI.setTabIcon({ tabId: focusedTabId, icon: "standard:custom_apps", iconAlt: "Description", });

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .