Angular 更改mat选择箭头图标

除了默认的下拉列表外，如何将mat select箭头更改为另一个图标

我尝试了不同的迭代

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

---

ChromeDeveloper工具的计算窗口似乎没有列出与箭头类型对应的任何属性

假设您使用的是：

这里的箭头是用纯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的评论

请添加边框：无样式

.mat-select-arrow {
  ...
  border: none;
  ...
}

---

并尝试更改宽度和高度属性。因为它们有0px默认值。如果需要的话

我也遇到了同样的问题，我必须设置“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;
}

---

希望这有帮助

有两种方法可以实现角度材质的自定义css：

方法1）通过禁用

视图封装

：

import { Component, OnInit, **ViewEncapsulation** } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';

@Component({
  selector: 'app-sample-component',
  templateUrl: './sample-component.component.html',
  styleUrls: ['./sample-component.component.css'],
  encapsulation: ViewEncapsulation.None  // *** This line disables the view encapsulation
})

export class SampleComponent implements OnInit {
}

优势： 您可以直接覆盖

示例component.component.css中的材质类属性，如：

.mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

.mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
.mat-select-arrow {
  border-top: 5px solid rgb(10, 73, 99);
}

::ng-deep .mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

::ng-deep .mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
::ng-deep .mat-select-arrow {
  color: rgb(10, 73, 99);
}

/***    /deep/ too works   ****/
/deep/ .mat-select-arrow {
  color: rgb(10, 73, 99);
}

方法2）传统方式（不禁用封装）（避免）：


优点：组件无需更改
component.component.css中的更改类似于：

.mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

.mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
.mat-select-arrow {
  border-top: 5px solid rgb(10, 73, 99);
}

::ng-deep .mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

::ng-deep .mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
::ng-deep .mat-select-arrow {
  color: rgb(10, 73, 99);
}

/***    /deep/ too works   ****/
/deep/ .mat-select-arrow {
  color: rgb(10, 73, 99);
}

缺点（方法2的注意事项）：
Angular正计划放弃对ng deep的支持。没有其他选择。此外，在官方的angular网站上显示为
：：ng deep
仅用于期间的缓冲

<mat-select class="my-class">

仅在模拟视图封装中使用/deep/、>>>和：：ng deep。Emulated是默认的和最常用的视图封装。有关更多信息，请参见控制视图封装部分

参考文献：




由于不推荐使用
ng:：deep
，并且不建议更改封装，我建议使用以下解决方案：

1） 将类添加到选择

<mat-select class="my-class">

另请参见：

import { Component, OnInit, **ViewEncapsulation** } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';

@Component({
  selector: 'app-sample-component',
  templateUrl: './sample-component.component.html',
  styleUrls: ['./sample-component.component.css'],
  encapsulation: ViewEncapsulation.None  // *** This line disables the view encapsulation
})

export class SampleComponent implements OnInit {
}



通过这种方式，您可以在整个应用程序上更改此mat select元素：

创建此文件：mat-select.scss（或您想要的任何名称，但扩展名为scss）

（根据您的文件系统结构，对于img/svg导入），将其放入：

.mat-select-arrow-wrapper {
  background-image: url("./assets/chevron-down.svg");

 }

 .mat-select-arrow {
   opacity: 0;
 }

将新的scss文件导入styles.scss，如下所示（根据新文件位置）：

@导入“/../mat select”

微笑
我也有同样的问题，我通过以下步骤解决了

首先，我通过在component.css中添加这一行的.css来隐藏mat箭头

：：ng deep.mat选择箭头{
不透明度：0；
}


然后，我在matselect后面添加了matIcon，但是在MatFormField中

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

域


或者。您可以通过添加边框图像源添加自定义图标URL图像

感谢对.mat选择箭头的css更改

.mat-select-arrow {
    border-left: unset !important;
    border-right: unset !important;
}

2） matSuffix到图像/图标

 <mat-form-field class="input-field">
        <mat-label>Label</mat-label>
        <mat-select  formControlName="lableName" id="labelId" >
           <mat-option *ngFor="let m of DataObj[v].option" [value]="m">{{m}}
           </mat-option>
        </mat-select>
        <i matSuffix class="icon-down"></i>
  </mat-form-field>


标签
{{m}}
My chrome不喜欢“图标”标签或“内容”标签的内容，这些是什么？如果不适当地确定覆盖范围，方法1是非常危险的。方法2已弃用。无需将viewencapsulation设置为false。应该至少有一个全局样式表可以包含材质替代-在该点不需要ng deep当替代CSS时，请确保在
.mat选择箭头
类选择器之前使用
：：ng deep
选择器。箭头是纯css，因此如果只想删除图标，可以在
中设置
边框：无
。选择箭头
css类