Highlights

Starting in r2020a, AppDesigner buttons and TreeNodes can display animated GIFs, SVG, and truecolor image arrays.

Every component in the App above is either a Button or a TreeNode!

Prior to r2020a the icon property of buttons and TreeNodes in AppDesigner supported JPEG, PNG, or GIF image files specified by a character vector or string array but did not support animation.

Here's how to display an animated GIF, SVG, or truecolor image in an App button or TreeNode starting in r2020a. And for the record, "GIF" is pronounced with a hard-g .

Display an animated GIF

Select the button or TreeNode from within AppDesigner > Design View and navigate to Component Browser > Inspector > Button dropdown list of properties (shown below). Select an animated GIF file and set the text and icon alignment properties.

To set the icon property programmatically,

app.Button.Icon = 'launch.gif';  % or "launch.gif"

The filename can be an image file on the Matlab path (see addpath ) or a full path to an image file.

Display SVG

Use “scalable vector graphics” files for high-resolution images that are scaled to different sizes while preserving their shape and retaining their clarity. A quick and easy way to remember which plotting function is assigned to each button in an app is to assign an image of the plot to the button.

After creating the figure, expand the axes by setting the position or outerposition property to [0 0 1 1] in normalized units and save the figure using File > Save as and select svg format. Save the image to the folder containing your app. Then follow the same procedure as animated GIFs.

Display truecolor image

A truecolor image comes in the form of an [m x n x 3] array where each m x n pixel color is specified by an RGB triplet (read more) . This feature allows you to dynamically create a digital image or to upload an image from a mat file rather than an image file.

In this example, a progress bar is created within the uibutton callback function and it’s updated within a loop. For a complete demo of this feature see this comment .

% Button pushed function: ProcessDataButton
function ProcessDataButtonPushed(app, event)
    % Change button name to "Processing"
    app.ProcessDataButton.Text = 'Processing...';
    % Put text on top of icon
    app.ProcessDataButton.IconAlignment = 'bottom';
    % Create waitbar with same color as button
    wbar = permute(repmat(app.ProcessDataButton.BackgroundColor,15,1,200),[1,3,2]);
    % Black frame around waitbar
    wbar([1,end],:,:) = 0;
    wbar(:,[1,end],:) = 0;
    % Load the empty waitbar to the button
    app.ProcessDataButton.Icon = wbar;
    % Loop through something and update waitbar
    n = 10;
    for i = 1:n
        % Update image data (royalblue)
        % if mod(i,10)==0 % update every 10 cycles; improves efficiency
         currentProg = min(round((size(wbar,2)-2)*(i/n)),size(wbar,2)-2);
         RGB = app.ProcessDataButton.Icon;
         RGB(2:end-1, 2:currentProg+1, 1) = 0.25391; % (royalblue)
         RGB(2:end-1, 2:currentProg+1, 2) = 0.41016;
         RGB(2:end-1, 2:currentProg+1, 3) = 0.87891;

           app.ProcessDataButton.Icon = RGB;
          % Pause to slow down animation
          pause(.3)
          % end
      end
      % remove waitbar
      app.ProcessDataButton.Icon = '';
      % Change button name
      app.ProcessDataButton.Text = 'Process Data';
  end

The for-loop above was improved on Feb-11-2022.

Credit for the black & teal GIF icons: lordicon.com