How to change colour of mdc-select dropdown arrow?

Question

I'm trying to change the default purple colour of the dropdown arrow in an mdc-select:

None of the sass mixins seem to do it.

How is it done?

Here is what I have tried so far:

HTML

<div class="mdc-select mdc-select--outlined">
    <input type="hidden" name="enhanced-select">
    <i class="mdc-select__dropdown-icon"></i>
    <div class="mdc-select__selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox" aria-labelledby="demo-label"></div>
    <div class="mdc-select__menu mdc-menu mdc-menu-surface">
        <ul class="mdc-list">
            <li class="mdc-list-item" data-value="41" role="option">41</li>
            <li class="mdc-list-item" data-value="42" role="option">42</li>
            <li class="mdc-list-item" data-value="43" role="option">43</li>
        </ul>
    </div>
    <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading"></div>
        <div class="mdc-notched-outline__notch">
            <label class="mdc-floating-label">Answer to Life</label>
        </div>
        <div class="mdc-notched-outline__trailing"></div>
    </div>
</div>  

SCSS

@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";

.mdc-select {
    @include mdc-select-ink-color(red);
    // @include mdc-select-container-fill-color(red);
    @include mdc-select-label-color(red);
    @include mdc-select-focused-label-color(red);
    @include mdc-select-bottom-line-color(red);
    @include mdc-select-focused-bottom-line-color(red);
    @include mdc-select-hover-bottom-line-color(red);
    @include mdc-select-outline-color(red);
    @include mdc-select-focused-outline-color(red);
    @include mdc-select-hover-outline-color(red);
    @include mdc-select-icon-color(red);
}

TS

import { MDCSelect } from '@material/select';
const select = new MDCSelect(document.querySelector('.mdc-select'));

Answer 1

this is not a icon or font this arrow is a background image of class .mdc-select--focused .mdc-select__dropdown-icon. you can change the image color by using filter css property.

filter: hue-rotate(60deg);

apply this css to your custom css for the class .mdc-select--focused .mdc-select__dropdown-icon it will work.

Thank You.