如何增加mat-accordion中箭头的大小？

Question

我正在使用mat手风琴，想要增加箭头的大小。
我试图使用字体大小和宽度来增加大小，但是并没有效果。
目前，我的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>

- user10910419

---

请问您能分享一下您尝试过的 CSS/SCSS 代码吗？ - shhdharmen

请查看解决方案的方法，如果不够有帮助，请留言评论。 - Abhishek Kumar

Answer 1

方法一:

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

最初的回答：

使用选择器.mat-expansion-indicator的::after属性，您可以通过操纵高度和宽度来实现所需大小的图标。

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

方案二：

您可以使用background-image属性来处理来自网址的任何图标。

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

演示 - 在展开面板上显示更大的图标（两种方法都有）

最初的回答

- Abhishek Kumar

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

将填充值更改为更改箭头大小。

边框宽度控制箭头线条的粗细。

- d-h-e

---

由于某些原因，当我将此代码放入我的CSS文件中时，它没有显示更改。但是在控制台中它确实有效。即使添加了!important也是如此。我可能还漏掉了其他什么吗？ - Flash

Answer 3

你可以在选择器前使用 ::ng-deep，并调整边框宽度和填充。同时，不要忘记添加 !important。

你的代码将如下所示：

/*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 */
}

- Hiten Sharma

---

::ng-deep已被弃用 - LaCodeM

::ng-deep已被弃用 - undefined