如何增加手风琴垫中箭头的尺寸？

Question

我用的是手风琴垫，我想增加箭头的尺寸。

我试着用字体大小和宽度来增加尺寸，但它不起作用

目前，我的font-size:30px;

<mat-accordion>
    <mat-expansion-panel>
        <mat-expansion-panel-header [expandedHeight]="'51px'">
            <mat-panel-title>
                Company Details
            </mat-panel-title>
        </mat-expansion-panel-header>
    </mat-expansion-panel>
    <mat-expansion-panel (opened)="panelOpenState = true"
     (closed)="panelOpenState = false">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Company's Addresses Details
            </mat-panel-title>
        </mat-expansion-panel-header>
        <app-settings-addresses [linkElementDetails]="addressDetails">
        </app-settings-addresses>
    </mat-expansion-panel>
</mat-accordion>

Answer 1

方法1 :

由于::after属性与选择器.mat-expansion-indicator一起使用，因此可以操作高度和宽度以实现所需的大小图标。

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

方法2 :

您可以使用background-image属性处理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;
}

演示-在扩展面板上显示更大的图标(这两种方法都有)

Answer 2

下面的示例与您的示例相同吗？-> https://material.angular.io/components/expansion/examples

然后可以使用padding (而不是字体大小)控制箭头的大小。

在示例中，箭头的CSS如下所示：

.mat-expansion-indicator::after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: '';
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: middle;
}

更改填充值以更改箭头大小。

边框宽度控制箭头线的厚度。

Answer 3

您可以使用：：ng-深之前的选择器，然后发挥周围的边框宽度和填充。

还有，别忘了补充！重要的是

你的代码看起来就像

/*Decreasing the arrow size*/
::ng-deep .mat-expansion-indicator::after {
  padding: 2px !important; /* decreasing inside space */ 
  border-width: 0px 1px 1px 0px !important; /* decreasing border-width */
}