Solución:
Puede agregar cualquier color como a continuación
<a mat-mini-fab color="success" routerLink=".">link</a>genera la clase con ese valor como ‘mat-success’ y luego crea css para esa clase
.mat-success {
background-color: green;
color: #fff;
}Puede cambiar el color del botón solo en la forma css normal definiendo una clase para el color de fondo naranja y usándola como atributo de clase.
Si necesita usarlo como color = “naranja”. Entonces necesitas crear tu propio tema con los colores que necesitas. Consulte Tematización de su aplicación de material angular sobre cómo hacerlo. Incluso puedes personalizarlo para cada elemento. A través de la personalización, puede elegir diferentes temas basados en elementos.
Pero aún no podrá usarlo como color = “naranja”, puede definir el naranja como su color primario o de acento y usarlo como color = “primario” o color = “acento” según sus necesidades.
El tema solo puede tener los siguientes elementos con diferentes colores
- Una paleta primaria: los colores más utilizados en todas las pantallas y componentes.
- Una paleta de acento: colores utilizados para el botón de acción flotante y elementos interactivos.
- Una paleta de advertencia: colores utilizados para transmitir el estado de error.
- Una paleta de primer plano: colores para texto e iconos.
- Una paleta de fondo: colores utilizados para fondos de elementos.
He creado estilos para todos los tipos de botones de tapete.
DEMO DE STACKBLITZ
(agregar a sus estilos globales)
.mat-button.mat-success,
.mat-stroked-button.mat-success {
color: #155724;
}
.mat-button.mat-success:hover,
.mat-stroked-button.mat-success:hover {
background-color: #f0fff3;
}
.mat-raised-button.mat-success,
.mat-flat-button.mat-success,
.mat-fab.mat-success,
.mat-mini-fab.mat-success {
color: #f0fff3;
background-color: #155724;
}
.mat-icon-button.mat-success {
color:#155724;
}