Change Arrow Style for Default Expansion Panel Arrow

Change arrow style for default expansion panel arrow

Yes it is possible. Give your expansion panel a reference id e.g. example and set the hideToggle property as true.

In the <md-panel-description>, you can place your icons and use the expanded property of the panel to show or hide the relevant icons.

  <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>

To provide space between the icon and panel description, add the following classes in your component.css:

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

I have used material icons. You can place your custom icons if you want. Here is a link to stackblitz demo.

Change default expansion panel arrow colour for angular material

Working code is below:

<md-expansion-panel>
  <md-expansion-panel-header class="specific-class">
    <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>

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

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
  styles: [`
    ::ng-deep .specific-class > .mat-expansion-indicator:after {
      color: white;
    }
  `],
})
export class ExpansionOverviewExample {}

Explanation:

1. In order to style nested elements dynamically added by Angular
   Material component you need to use special selector ::ng-deep.
   That allows to work around view encapsulation.

2. In order to override built-in component styles applied dynamically
   you need to increase CSS specificity for your selector. That's
   the reason for adding additional CSS class specific-class. If you
   gonna use selector ::ng-deep .mat-expansion-indicator:after
   expansion component will override it.

How to position the Angular Material expansion panel arrow icon on the left-hand side

first you need to import angular material icon and expansion panel module in app.module.ts file,

import {MatExpansionModule,MatIconModule} from '@angular/material';
...
@NgModule({
  ...
  imports: [
    MatExpansionModule,
    MatIconModule 
  ]
  ...
})
export class AppModule { }

Add this code in your HTML file,

    <mat-expansion-panel expanded='true' hideToggle="true" (click)="click()">
      <mat-expansion-panel-header [ngClass]="tickets-container-header">
        <mat-panel-title>
            <mat-icon>{{icon  ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>
            <div  class="col-md-9">
            {{header}} 
            </div>
        </mat-panel-title>

      </mat-expansion-panel-header>
    </mat-expansion-panel>

Add this code in your component file,

icon: boolean = false;

click(){
    this.icon = !this.icon;
  }

Thanks,

Change ExpansionPanel arrow color on expanded parent ExpansionPanel in material-ui

Below is one way of achieving this which uses the MuiExpansionPanelSummary-expandIcon class to target the icon and overrides this back to the default for the nested expansion panel.

import { createMuiTheme } from "@material-ui/core";
const defaultTheme = createMuiTheme();

const myTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          //Elevation 1
          boxShadow:
            "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
          minHeight: "0px",
          backgroundColor: "#3f51b5",
          color: "white",
          "& .MuiExpansionPanelSummary-expandIcon": {
            color: "white"
          }
        },
        ".MuiExpansionPanelDetails-root &$expanded": {
          backgroundColor: "transparent",
          color: "black",
          "& .MuiExpansionPanelSummary-expandIcon": {
            color: defaultTheme.palette.action.active
          }
        }
      }
    }
  }
});

export default myTheme;

How to Change Arrow Icon in ExpansionPanelList

The answer was to make an implementation of a ListView instead. ExpansionPanels are like ListViews with ExpansionTiles, however they are more strict and you cannot customize ExpansionPanels as much as ExpansionTiles, which can only be used in a ListView.

Angular-material:- Change default icon for mat-expansion-panel in accordion

Give your expansion panel a reference id example and set the hideToggle property as true.
place your icons in <mat-panel-description> and use the expanded property of the panel to show or hide the relevant icons.

 <mat-expansion-panel  class="custom-header" hideToggle="true" #example>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Collapsible Group Item #1
      </mat-panel-title>
      <mat-panel-description> 
        <mat-icon *ngIf="!example.expanded">add</mat-icon>
        <mat-icon *ngIf="example.expanded">add_box</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

     <p>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
    </p>
  </mat-expansion-panel>

CSS:

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

Also check on link:

https://stackblitz.com/edit/angular-irnxvd?file=src%2Fapp%2Fapp.component.css

How to change toggle icon of mat-expansion-panel?

As stated on the Angular Material Expansion Panel documentation, we can customise the stylings of the mat-extension-panel-header, which will in turn allow you to customise the icons.

First and foremost, you hide the original icon by setting the hideToggle attribute to true. In addition, we assign the event bindings (opened) and (closed) to the panelOpenState property. You may check out the other properties of mat-expansion-panel over here.

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">

Next, on your mat-panel-description, you include the custom icons required. The icons shown will be dependent on the state of the panel. For this example, we are using the icons from Material Icons.

<mat-panel-description>
  <mat-icon *ngIf="!panelOpenState">add</mat-icon>
  <mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description> 

I have edited the original sample from the Angular documentation, such that it is using the custom + and minus icons to denote the expanded/collapsed state of the mat-extension-panel. You may access the demo over here.

How do I increase the size of arrow in mat-accordion

Approach 1 :

As ::after property is used with selector .mat-expansion-indicator, you can manipulate the height and width for achieving your desired size icon.

.mat-expansion-indicator::after {
    height: 10px; <======== adjust accordingly
    width: 10px; <======== adjust accordingly
}

Approach 2 :

you can use background-image property to handle any icon from url.

.mat-expansion-indicator::after {
     height: 20px;
    width: 20px;
    background-image: url(https://img.icons8.com/material/24/000000/plus.png);
    background-size: cover;
    border: none;
    border-width: 0 !important;
    transform: rotate(0) !important;
}

Demo - showing bigger icon on expansion panel (with both approaches)

change basic accourdion panel color arrow angular material

You have to use ::ng-deep along with material class to override default style.

:host ::ng-deep .mat-expansion-indicator::after {
      color:red !important;
      border-color: rgb(0, 0, 0) !important
} 

Example

---

Related Topics