I'm trying to set a custom icon in a Utility Bar component using the new Utility Bar Component in Lightning.


<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <force:utilityBarAPI aura:id="utilitybar" />
    <lightning:button label="Set Panel Header Icon" onclick="{! c.customizeUtilityPanel }" />


    customizeUtilityPanel : function(component, event, helper) {
        var utilityAPI = component.find("utilitybar");
        utilityAPI.getAllUtilityInfo().then(function(response) {
            var myUtilityInfo = response[0];

            utilityAPI.setPanelHeaderIcon({utilityId: myUtilityInfo.id, sldsKey: "clock"});
            utilityAPI.setUtilityIcon({utilityId: myUtilityInfo.id, sldsKey: "frozen"});

            utilityAPI.openUtility({utilityId: myUtilityInfo.id});

But I'm receiving following error in browser console:

aura_prod.js:922 null "Error: Invalid or missing icon undefined" (anonymous) @ aura_prod.js:922 aura_prod.js:849 Uncaught (in promise) Error: Invalid or missing icon undefined b @ aura_prod.js:849 Async Call d @ internal.js:1 b @ aura_prod.js:849 d.then @ internal.js:1

I'm using following Console Developer Guide and the new force:utilityBarAPI component introduced in Winter '18.

Does anyone have any idea why I'm unable to use the method to set an Icon in Utility bar component?

1 Answer 1


I got it to work, but honestly it was more of a trial and error method. I suspect we are running into a documentation bug of some kind. The documentation states setUtilityIcon({sldsKey, utilityId}) , but the error seems to indicate a key "icon" was missing. So i modified the code as follows and UtilityApi started to work as expected. Check the before and after images for the working scenario.


    var utilityAPI = component.find("utilitybar");
    utilityAPI.getEnclosingUtilityId().then(function(response) {
        utilityAPI.setUtilityLabel({label : "Hello World", utilityId : response});
        utilityAPI.setUtilityIcon({icon : "insert_tag_field", utilityId : response });

Before SetUtilityIcon()

enter image description here

After SetUtilityIcon()

enter image description here

We will be able to notice that the icon and label changed to "insert tag field" & "Hello World" respectively . And i guess callback is optional.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.