デフォルトの拡張パネル矢印の矢印のスタイルを変更します

Question

以下のような角度の拡張パネルがあります。

しかし、私はこのような何かにある矢印のデザインを変更したい：

展開されていない：

拡張

：

どのように？または角度のある素材でこれを行うことは可能ですか？以下 コード：

HTML：

<md-expansion-panel> 
    <md-expansion-panel-header> 
    <md-panel-title> 
     Personal data 
    </md-panel-title> 
    <md-panel-description> 
     Type your name and age 
    </md-panel-description> 
    </md-expansion-panel-header> 

    <md-form-field> 
    <input mdInput placeholder="First name"> 
    </md-form-field> 

    <md-form-field> 
    <input mdInput placeholder="Age"> 
    </md-form-field> 
</md-expansion-panel> 

TS：

import {Component} from '@angular/core'; 

/** 
* @title Basic expansion panel 
*/ 
@Component({ 
    selector: 'expansion-overview-example', 
    templateUrl: 'expansion-overview-example.html', 
}) 
export class ExpansionOverviewExample {} 

Answer 1

はい、それは可能です。拡張パネルに参照IDを付けます。 exampleとし、hideToggleプロパティをtrueと設定します。

<md-panel-description>には、アイコンを配置し、パネルのexpandedプロパティを使用して、関連するアイコンを表示または非表示にすることができます。私は材料のアイコンを使用している

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description { 
    flex-basis: 0; 
} 

.custom-header .mat-expansion-panel-header-description { 
    justify-content: space-between; 
    align-items: center; 
} 

：あなたのcomponent.cssで以下のクラスを追加し、アイコンとパネルの説明の間にスペースを提供するために、

<md-expansion-panel class="custom-header" hideToggle="true" #example> 
    <md-expansion-panel-header> 
     <md-panel-title> 
     Personal data 
     </md-panel-title> 
     <md-panel-description> 
     Type your name and age 
     <md-icon *ngIf="!example.expanded">play_arrow</md-icon> 
     <md-icon *ngIf="example.expanded">arrow_drop_down</md-icon> 
     </md-panel-description> 
    </md-expansion-panel-header> 

    <md-form-field> 
     <input mdInput placeholder="First name"> 
    </md-form-field> 

    <md-form-field> 
     <input mdInput placeholder="Age"> 
    </md-form-field> 
    </md-expansion-panel> 

。必要に応じてカスタムアイコンを配置することができます。ここにstackblitz demoへのリンクがあります。