Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-117880

Material 3 misaligns Button icon

    XMLWordPrintable

Details

    • 731bff847 (dev), e3d490a7f (6.6), 5cdbe7517 (6.5)

    Description

      A minimal reproducer:

      Window {
          id: window
      
          width: 640
          height: 480
          visible: true
          title: qsTr("QmlApp")
      
          Button {
              icon.source: "path/to/icon/image"
          }
      }
      

      as Main.qml and the following line in main function:

      QQuickStyle::setStyle("Material");
      

      The behavior of icon is different in Material 3 (Qt 6.5) than in previous versions (Qt 5.15 ~ 6.4)

      Qt 6.5: icon is not centered but slightly offset towards left.
      Qt 5.15 ~ 6.4: icon is perfectly centered.

      AS far as I see it, it looks like a bug and not how Google intends. Google documentation does not describe any deafult offset:
      https://m3.material.io/components/icon-buttons/overview
      I don't see anything about offset in our doc either:
      https://www.qt.io/blog/material-3-changes-in-qt-quick-controls

      A screenshot is attached to show what I mean by 'offset'. See how icon is not centered in case of 'Qt 6' case.

      If "QQuickStyle::setStyle("Material");" is commented out, i.e. no Material style, then icon is perfectly centered in 6.5. So it must be the problem of Material integration.

      Attachments

        For Gerrit Dashboard: QTBUG-117880
        # Subject Branch Project Status CR V

        Activity

          People

            poikelin Joni Poikelin
            luqiaochen Luqiao Chen
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes