Change mat-select-arrow icon

Question

How can I change the mat-select-arrow to another icon, besides the default dropdown?

I've tried various iterations of

.mat-select-arrow {
    icon: url('/assets/images/keyboard_arrow_down.png');
    content: icon;
}

Chrome developer tool's compute window does not seem to list any property that corresponds to the arrow type.

Answer 1

假设你正在使用这个：

https://material.angular.io/components/select/overview

这里的箭头是用纯 css 制作的：

::ng-deep .mat-select-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid;
    margin: 0 4px;
}

要更改此设置，请覆盖边框值并设置背景图像

编辑：添加::ng-deep；见@Ruben Szekér 的评论

Answer 2

我遇到了同样的问题，我不得不设置 'border-image-source' 属性。

::ng-deep .mat-select-arrow {
    border-left: 15px solid transparent !important;
    border-right: none !important;
    border-top: 15px solid transparent !important;
    border-image-source: url('my img url') !important;
    border-image-repeat: stretch !important;
}

希望这可以帮助！

Answer 3

我有同样的问题，我按照这个程序解决了。

1. 首先，我通过在这行 .css 下面添加到 component.css 来隐藏 mat-arrow

   ::ng-deep .mat-select-arrow { 不透明度：0; }

2. 然后，我在 matselect 之后但在 MatFormField 内添加了 matIcon。

   <mat-icon matSuffix>domain</mat-icon>
   

或者。您可以通过添加 border-images-source 来添加自定义图标 URL 图像

谢谢