IconButton (App Component)

A button component for app designer apps that can be styled with an SVG icon

Description

This is a button component for SVG based icons. This provides a way to use SVG based icons in a button and customize the icon color as well as some other properties to give the button effects on interaction

Feedback

Please leave suggestions for more styling options or other feedback in the discussions tab.

Preview

Example

NB: This example is included in the examples folder. Because it relies on the mfilename('fullpath') command, the example will only work if the script is run from its original location.

f = uifigure('Name', 'Icon Button Demo');
gl = uigridlayout(f);
gl.ColumnWidth = {'1x', 120, '1x'};
gl.RowHeight = {'1x', 120, '1x'};

rootFolder = fileparts(fileparts(mfilename('fullpath')));
play_icon = fullfile(rootFolder, 'resources', 'icons', 'play-113.svg');

btn = IconButton(gl, ...
    'Height', 100, ...
    'Width', 100, ...
    'Color', '#002054', ...
    'SVGSource', play_icon);
btn.Layout.Row = 2;
btn.Layout.Column = 2;
btn.ButtonPushedFcn = @onButtonPushed;

function onButtonPushed(src, ~)
    rootFolder = fileparts(fileparts(mfilename('fullpath')));
    play_icon = fullfile(rootFolder, 'resources', 'icons', 'play-113.svg');
    pause_icon = fullfile(rootFolder, 'resources', 'icons', 'pause-51.svg');
    
    switch src.SVGSource
        case play_icon
            src.SVGSource = pause_icon;
        case pause_icon
            src.SVGSource = play_icon;
    end
end