Extending Power BI Buttons Beyond the Default Icons

Power BI buttons provide more interactivity in reports, and different states allow unique formatting when users interact with a button. What are the visual icons available when using buttons in Power BI, and is it possible to extend them?

Button Icons

Power BI has a handful of button icons that provide cues for user interactions. These icons are the only ones available with Power BI buttons, which have a rather limited selection.

The default icons are: Blank, Left arrow, Right arrow, Back, Reset, Help, Information, Q&A, and Bookmark.

Please note that report designers do not have to use these icons for the corresponding functionality. For example, a bookmark action could be setup with a Blank or Q&A icon instead of the Bookmark icon, and the bookmark would still work. The icons are simply visuals, and actions are independent of the icon displayed.

Actions

What are actions? A Power BI button has an optional action that determines what happens after a user clicks it. These actions are currently: Back, Bookmark, Q&A, and Web URL. For example, a Bookmark action would allow the user to view the Power BI bookmark that the report designer associates with the button.

While these actions are advantageous for building advanced interactivity into your reports, both Power BI images and shapes share the same actions as buttons.

What is the purpose or advantage of separate buttons in Power BI if images and shapes can facilitate the same actions?

Button States

Buttons have unique states: Default state, On hover, and On press

Different visual properties are configurable for different states. If a user interacts with a button by hovering or pressing it, a report designer can provide alternative formatting for the button Fill, Outline, Icon, and Text.

These states are critical to buttons. Images and shapes do not have states like buttons do. If you only wanted an action but did not want to change appearance when hovering or pressing, you could get by with either images or shapes. There would not be as much of a need for separate buttons.

Custom Icons: Group a Button with an Image

By now, you’ve probably guessed that there’s no true way to assign a custom icon or image to a button. If you feel cheated by the following workaround, remember to vote for actual custom button icons at ideas.powerbi.com.

An easy way to achieve the same effect as a custom icon is to add an Image and a Button, overlay the button on top of the Image, and then Group them together so they move and resize together.

For example, if I have a custom image or icon for Jack the Stickman, add it as an image.

Next, insert a Blank button, resize, and overlay it on top of the image using the Selection pane.

Disable the button’s Background and Icon so that the underlying image appears. Adjust Outline any other button formatting required.

Change button states for Fill, Outline, Text, and more as needed. Remember that these state changes are the real value behind buttons. For example, I can alter the Fill property when a user hovers over the button to change its color.

Next, add a button action if desired.

Finally, add the Button and Image to a Group in the Selection pane. Grouping the two objects allows them to function as a single object now. Whenever you move or resize the group, the associated button and image change accordingly.

Note that I used an image, which is constrained to certain image types like PNG. If you want to use SVG, simply use it with the HTML Viewer custom visual instead of inserting a Power BI image.

While there’s no native way to add custom icons, the power of Groups allows separate objects to function as a single object. While we wait for the possible expansion of Power BI’s native button capabilities, the method offered here provides a feasible alternative.