cdkDragHandle not working if it's not a direct child of cdkDrag

[lunarmoon26]

Bug, feature request, or proposal:

cdkDragHandle directive is not recognized by cdkDrag if it's not directly under the cdkDrag element.
e.g.

<mat-expansion-panel *ngFor="let item of items; index as i" cdkDrag>
    <mat-expansion-panel-header>
              <mat-panel-title>
                <mat-icon class="mr-1" cdkDragHandle>reorder</mat-icon>
                {{item}}
              </mat-panel-title>
            </mat-expansion-panel-header>
            ...
          </mat-expansion-panel>
</mat-expansion-panel>

What is the expected behavior?

Element with cdkDragHandle directive can be recognized as long as it's inside the cdkDrag element.

What is the current behavior?

cdkDrag element (top element) is used as the handle

What are the steps to reproduce?

Providing a StackBlitz reproduction:
https://stackblitz.com/edit/angular-material2-issue-yo4yc2?embed=1

What is the use-case or motivation for changing an existing behavior?

When cdkDrag attached on an Expansion Panel, the expandability will be gone. The click triggers drag-n-drop only.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.2
Material 6.4.7
MacOS 10.14
TypeScript 2.7.2
Browser Chrome

Is there anything else we should know?

No

[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.}