Material style is shrinking/vanishing images

[mzimmers]

Hi all -

I've discovered some odd behavior with the Material style. Sorry for the lengthy code snippet, but I wanted to give an elaborate representation of what I'm seeing.

I've created a Row with 3 Buttons of different sizes. Each button contains the same image. For reference, I've also added Images with the same source.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: mainWindow
    visible: true; width: 1024; height: 768
    property real reductionFactor: 0.5
    property url imageSource: "qrc:/icons/Pump.png"
    Row {
        id: row
        height: 80; spacing: 16

        Button {
            id: b1
            height: row.height
            width: row.height

            icon {
                source: imageSource
                height: b1.height
                width: height
            }

            background: Rectangle {
                anchors.fill: b1
                color: 'lightgray'
            }
        }

        Image {
            source: imageSource
            height: b1.height
            width: height
        }

        Button {
            id: b2
            height: b1.height * reductionFactor
            width: height

            icon {
                source: imageSource
                height: b2.height
                width: height
            }

            background: Rectangle {
                anchors.fill: b2
                color: 'lightgray'
            }
        }
        Image {
            source: imageSource
            height: b2.height
            width: height
        }

        Button {
            id: b3
            height: b2.height * reductionFactor
            width: height

            icon {
                source: imageSource
                height: b3.height
                width: height
            }

            background: Rectangle {
                anchors.fill: b3
                color: 'lightgray'
            }
        }
        Image {
            source: imageSource
            height: b3.height
            width: height
        }
    }
}

Using the default style (running on Windows), everything seems about right (though the images are a little smaller than I'd expected):

But when I change to Material style (in main.cpp):

    QQuickStyle::setStyle("Material");

I get this:

As you can see, the 2nd button's icon is much smaller, and the 3rd button's icon disappears completely.

This behavior also occurs when running on Android.

So...what's going on here? Is this a bug in the Material style, or am I supposed to be performing some other configuration for the style?

Thanks...this one is really baffling me.

[ekkescorner]

@mzimmers in Material there's some padding, so the available space for your Image is smaller
https://m2.material.io/components/buttons#specs

[mzimmers]

@ekkescorner said in Material style is shrinking/vanishing images:

@mzimmers in Material there's some padding,

There sure is: I put in a telltale for a button of 28 px high, and it has a padding value of 12 (!). Seems like their algorithm needs a bit of work.

Thanks for finding that.