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

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        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