Angular material datepicker arrow color


In the material datepicker there is a small arrow for changing the year, I managed to change every component’s color in the calendar but not this arrow.

Calendar arrow

I inspected it in the browser and found a mat-calendar-arrow class but I can only change the background-color of it and not the arrow’s color. Is there a possible way to change it to white? I need it for my dark-theme.


Try this out:

.mat-calendar-arrow {
    border-top-color: white;

Answered By – robbieAreBest

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.