How to change colour of mdc-select dropdown arrow?

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:


<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>
    <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 class="mdc-notched-outline__trailing"></div>


@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);


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

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.

MDC Select, MDC Select provides Material Design single-option select menus, using the MDC menu. mdc-select__anchor element as well as setting the width of the mdc- select__menu element to match. <i class="mdc-select__dropdown-icon"></i> label-color($color), Customizes the label color of the select in the unfocused state. Where is with a regular button it’s fairly easy to change it, changing the selector arrow is another story. Just look at some of the possible variations (and those are outdated)! There are many tutorials out there to change the selector drop down.

I managed to theme it by using an MDC internal Sass mixin: mdc-select-dd-arrow-svg-bg_. An example is:

.mdc-select .mdc-select__dropdown-icon {
    @include mdc-select-dd-arrow-svg-bg_(COLOR, 1);

where COLOR is an MDC theme property (e.g. 'secondary') or an HTML color (e.g. #ff0000). It cannot be a var because, as pointed by @KuldipKoradia, an SVG is generated at compilation time.

Select icon - Material Design, The problem I'm having is that when viewing my select dropdowns on mobile/ iphone as expected, though the dropdown right hand side arrow is also removed. -moz-appearance: none; appearance: none; width: 278px; border- color: #444� Inject the following CSS codes to your form, that should get rid of the drop down arrow..form-dropdown {margin: 0;-webkit-appearance: none;-moz-appearance: button; appearance: none;} However, if you want to retain the arrow and only change its color, use the following CSS codes. Works properly on Chrome, might not work properly with other browsers..form-dropdown {margin: 0;-webkit-appearance: none;-moz-appearance: button;

The easiest and simplest way is to hide the SVG and just create your own dropdown arrow through CSS (no HTML changes needed). Then you can easily change the color as often as you need to:

  background: none;
  width: 0;
  height: 0;
  bottom: 24px;
  right: 10px;  
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #333333;
.mdc-select--activated .mdc-select__dropdown-icon,
.mdc-select--focused .mdc-select__dropdown-icon {
  border-top: 5px solid #FF0000;

Select Menus - Material Design, dropdown-icon-color, 71 $query: $query 72 ); 73 @include outlined_($query: $ query); 211 } 212 213 .mdc-select--invalid { 214 @include label-color(variables. Use punctuation marks instead of the drop-down arrow¶ It is quite pretty to use your preferred marks instead of the annoying drop-down sign of the <select> box. Set the marks in the content property and set the corresponding font to look good. Here, we set "Consolas" and "monospace".

Select arrow no showing -webkit-appearance: none, Hi In the drop down select form field, the field name is much darker than other types #cf7md-form { color: rgba(0, 0, 0, 0.38); } #cf7md-form � In some cases you would be having your dropdown element at the end of your page and if the user clicks on that dropdown and if there’s no right amount of space is available below the dropdown it will show the options in upward direction. Well, this seems fine but the arrow shown in your dropdown doesn’t seems to be in right direction.

packages/mdc-select/_mixins.scss, Created by a team of engineers and UX designers at Google, MDC features dozens Material Components for the web (MDC Web) are framework-agnostic, built using Button; Select; Text field An ink ripple effect upon interaction; Rounded corners; Color theming support <i class="mdc-select__dropdown- icon"></i>. Hi, I'm new to WPF, and need to change the combobox down arrow color to red. I checked the solution mentioned in Change color of ComboBox's arrow button and not able to see the option Edit Template->Edit a Copy.

Drop Down Select style, mdc-select. /. <! Style Customization. Will Ernest- Will Ernest feat(select): Move colors for default select to mixins (#1934) 2年前. Then, under Ease of Access Center, click the “Change how your mouse works” link. Select an option for the size and color you want for the mouse pointer in the “Change the color and size of mouse pointers” box. Then, click “OK”. You are returned to the Ease of Access Center screen on the Control Panel window.