Home » excel » office js – How to set ribbon icon for my excel add-in

office js – How to set ribbon icon for my excel add-in

Posted by: admin May 14, 2020 Leave a comment

Questions:

I’ve set the icon for the button of my excel ribbon. But it still shows the default image:

<ExtensionPoint xsi:type="PrimaryCommandSurface">
        <!-- Use OfficeTab to extend an existing Tab. Use CustomTab to create a new tab. -->
        <OfficeTab id="TabHome">
          <!-- Ensure you provide a unique id for the group. Recommendation for any IDs is to namespace using your company name. -->
          <Group id="Excely.SheetExplorer.Group">
            <!-- Label for your group. resid must point to a ShortString resource. -->
            <Label resid="Excely.GroupLabel" />
            <!-- Icons. Required sizes 16,32,80, optional 20, 24, 40, 48, 64. Strongly recommended to provide all sizes for great UX. -->
            <!-- Use PNG icons. All URLs on the resources section must use HTTPS. -->
            <Icon>
              <bt:Image size="16" resid="Excely.tpicon_16x16" />
              <bt:Image size="32" resid="Excely.tpicon_32x32" />
              <bt:Image size="80" resid="Excely.tpicon_80x80" />
            </Icon>

            <!-- Control. It can be of type "Button" or "Menu". -->
            <Control xsi:type="Button" id="Excely.TaskpaneButton">
              <Label resid="Excely.TaskpaneButton.Label" />
              <Supertip>
                <!-- ToolTip title. resid must point to a ShortString resource. -->
                <Title resid="Excely.TaskpaneButton.Label" />
                <!-- ToolTip description. resid must point to a LongString resource. -->
                <Description resid="Excely.TaskpaneButton.Tooltip" />
              </Supertip>
              <Icon>
                <bt:Image size="16" resid="Excely.tpicon_16x16" />
                <bt:Image size="32" resid="Excely.tpicon_32x32" />
                <bt:Image size="80" resid="Excely.tpicon_80x80" />
              </Icon>

              <!-- This is what happens when the command is triggered (E.g. click on the Ribbon). Supported actions are ExecuteFunction or ShowTaskpane. -->
              <Action xsi:type="ShowTaskpane">
                <TaskpaneId>ShowMainMenu</TaskpaneId>
                <!-- Provide a URL resource id for the location that will be displayed on the task pane. -->
                <SourceLocation resid="Excely.Taskpane.Url" />
              </Action>
            </Control>
          </Group>
        </OfficeTab>
      </ExtensionPoint>

Where should I set the image for ribbon?

UPDATE: I found the problem is not from the manifest settings. If I change the web project config from Local IIS to IIS Express the icon is working fine. But when it is set to Local IIS the default icon appears!

How to&Answers:

The part of the manifest you’ve provided only shows the resid names that you’ve created. In the Resources section of the manifest, which you don’t show, you need to define these resid values with the URLs of the icon files.

Also, changes to button icons sometimes don’t take effect unless you clear the Office cache. See Clear the Office Cache.