Standard way to make icon buttons?

[dannytaurus]

What's the standard way to make icon buttons for things like open/close preset browser, save preset, show/hide settings menu, etc.

Is it to use LAF on a regular button and draw a converted SVG path inside it?

[clevername27]

@dannytaurus I use a font, Modern Pictograms. Simpler than an SVG.

[dannytaurus]

@clevername27 Ah, nice tip - thanks.

I mean more like what component do I use? Just a button styled with LAF?

Or is there some other trick of using a panel or a label, for instance?

[clevername27]

@dannytaurus Zzzzzzz I'll answer tomorrow.

[Christoph Hart]

Is it to use LAF on a regular button and draw a converted SVG path inside it?

Yes it was until the CSS renderer came along, now I would recommended this :)

[Matt_SF]

@clevername27 said in Standard way to make icon buttons?:

@dannytaurus I use a font, Modern Pictograms. Simpler than an SVG.

Why haven't thought of that before ?

[orange]

@dannytaurus

My favorite is still svg. Check this snippet:

https://forum.hise.audio/topic/1815/useful-snippets?_=1728163383619

[dannytaurus]

@orange DO you draw the SVG in a button using LAF? So you get the button functionality but it looks like an icon. Or do you do something else with the SVG?

[orange]

@dannytaurus Yes of course, svg can be used with LAF.

Here is the LAF collection, check out the first example, “Gandalf Magic” button which uses this method.

https://forum.hise.audio/topic/6615/laf-collection-for-everyone?_=1728161844509

[Christoph Hart]

Also for bigger projects I would recommend using one LAF class for all icon buttons and then create a JSON object that contains references to the icon and use the text property as key so you can reuse the same code plus have all those big strings that contain the icon data tucked away in a single file.

namespace IconManager
{
inline function makePath(b64)
{
    local p = Content.createPath();
    p.loadFromData(b64);
    return p;
}

const var icons = {
  "deleteIcon": makePath("slkdnlksjdnksvdfvishk"),
  "addIcon": makePath("lkandlndkjcnlkasdcjnalskdjcn")
};

inline function getPath(obj)
{
    return icons[obj.text];
}
}

// in your Laf:
function drawIconButton(g, obj)
{
    g.setColour(obj.textColour);
    g.fillPath(IconManager.getPath(obj));
}

[d.healey]

@Christoph-Hart said in Standard way to make icon buttons?:

LAF class for all icon buttons and then create a JSON object that contains references to the icon and use the text property as key

This is the way I do it too.

@dannytaurus I know you've seen this video already but if you need a refresh I demonstrate the idea Christoph is talking about in it - https://www.patreon.com/posts/customising-with-105377992

[dannytaurus]

@d-healey Yes, thanks. I also found your custom checkboxes video very helpful too:

https://www.youtube.com/watch?v=k2SnYLkdlWE

Quick question - is it common to have several LAFs? Or is it better to just use one per project?

[d.healey]

@dannytaurus said in Standard way to make icon buttons?:

is it common to have several LAF

Yes. You should make use of local look and feel where you can. The golden rule is to avoid repeating yourself, so if multiple controls can share the same laf there is no reason why they shouldn't.

For the few components that can only be styled globally you should use a single global laf object.