bug(mat-expansion-panel): mat-expansion-indicator is slightly off center

[shinkhouse]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The mat-expansion-indicator caret icon is slightly off vertical centered on the mat-expansion-panel-header. If you look at your own documentation, and apply the following style to the mat-expansion-panel-header in Chrome Dev Tools,
mat-expansion-panel-header#mat-expansion-panel-header-1::after { height: 1px; width: 100%; position: absolute; content: ""; background: red; }

You can see a red line centered on the element, but the arrow is slightly below that line.. or above it, if it is expanded. So visually, this seems to not be correct. Is this intentional?

Below, I noted this issue in Angular 13, but also reproduced in v16 as well.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-b45cmn?file=src%2Fstyles.scss
Steps to reproduce:

1. I had just added the css mentioned above... but you can see it in the StackBlitz as well.

Expected Behavior

The mat-expansion-indicator should be visually centered in the mat-expansion-panel-header component.

Actual Behavior

It is visually off centered.

Environment

Angular CLI: 13.1.1
Node: 16.14.0
Package Manager: npm 8.3.1
OS: darwin arm64

Angular: 13.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.1
@angular-devkit/build-angular   13.3.10
@angular-devkit/core            13.1.1
@angular-devkit/schematics      13.1.1
@angular/cli                    13.1.1
@angular/flex-layout            13.0.0-beta.36
@angular/http                   7.2.16
@schematics/angular             13.1.1
rxjs                            6.6.7
typescript                      4.5.4

- Angular:
- CDK/Material:
- Browser(s): Chrome 118.0.5993.117
- Operating System (e.g. Windows, macOS, Ubuntu): macOS Sonoma 14.0

[mmalerba]

Confirmed, the arrow is slightly too low

[shinkhouse]

@mmalerba Mind if I take a stab at fixing it? I can submit a pull request related to this ticket.

I was thinking about changing this to use an svg icon instead and setting some specific height to the mat-expansion-indicator. This seems to center it okay.

<span [@indicatorRotate]="_getExpandedState()" class="mat-expansion-indicator">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    height="24px"
    viewBox="0 0 24 24"
    width="24px"
    fill="currentColor" 
  >
    <path d="M0 0h24v24H0V0z" fill="none"></path>
    <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
  </svg>
</span>

.mat-expansion-indicator {
      width: 24px;
      height: 24px;

      & svg {
        @include token-utils.use-tokens(
          tokens-mat-expansion.$prefix,
          tokens-mat-expansion.get-token-slots()
        ) {
          @include token-utils.create-token-slot(fill, header-indicator-color);
        }
      }
    }

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}