Cambiar el icono de flecha de selección de tapete

Solución:

suponga que está usando esto:

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

La flecha aquí está hecha con CSS puro:

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

para cambiar esto, anule los valores del borde y establezca una imagen de fondo

Editar: agregar ::ng-deep; ver comentario de @Ruben Szekér

Tuve el mismo problema y tuve que establecer la propiedad ‘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;
}

¡Espero que esto ayude!

Hay dos formas de lograr el CSS personalizado para material angular:

Método 1) Desactivando viewencapsulation:

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

Ventaja:
Puede anular directamente las propiedades de la clase de material en el sample-component.component.css igual que:

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

Método 2) Forma tradicional (sin deshabilitar la encapsulación) (Evitar):

Ventaja: No se debe realizar ningún cambio en el componente Cambio en component.component.css igual que:

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

DESVENTAJA (Una advertencia para el Método 2):
Angular planea eliminar el soporte para ng-deep. Existe esta conversación reciente sobre git para las alternativas. También se indica en el sitio oficial angular como ::ng-deep está diseñado solo para amortiguar durante el apoyo a la depricacion.

Use / deep /, >>> y :: ng-deep solo con encapsulación de vista emulada. Emulated es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección Control de encapsulación de vista.

Referencias:

https://github.com/angular/angular/issues/25160
https://angular.io/guide/component-styles#deprecated-deep–and-ng-deep

---

---

Utiliza Nuestro Buscador