How to change material-icon color to white of angular_components in an Angular Dart project?

Question

How can I change the material-drawer material-icon color to white with an dark background of angular_components in an angular dart project.

app_component.html

<material-drawer persistent #drawer="drawer"
                 [class.custom-width]="customWidth">
    <div class="mini-drawer">
        <material-list *deferredContent>
            <div class="mat-drawer-spacer"></div>
            <div>
                <material-list-item>
                    <material-icon icon="inbox"></material-icon>
                </material-list-item>
                <material-list-item>
                    <material-icon icon="star"></material-icon>
                </material-list-item>
                <material-list-item>
                    <material-icon icon="send"></material-icon>
                </material-list-item>
                <material-list-item>
                    <material-icon icon="drafts"></material-icon>
                </material-list-item>
            </div>
        </material-list>
    </div>
</material-drawer>
<div class="material-content">
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button class="material-drawer-button" icon (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">Mobile Layout</span>
            <div class="material-spacer"></div>
        </div>
    </header>
    <div class="app-layout">
        Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo
        et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc
        veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an
        legere iriure blandit. Veri iisque accusamus an pri.

    </div>
</div>

app_component.scss

@import 'package:angular_components/css/material/material';
@import 'package:angular_components/material_tab/mixins';
@import 'package:angular_components/app_layout/mixins';

:host {

}

.custom-width {
  @include mat-drawer-width(72px);
  @include mat-temporary-drawer-width(72px);
}

.mini-drawer {
  height: 100%;
  background: $mat-blue;
}

material-list {
  background-color: transparent;
  color: $mat-white;
}

score 0 · Answer 1 · answered Aug 06 '18 at 20:06

You can simply change the color on the html element itself. Example is here: https://dart-lang.github.io/angular_components_example/#material_icon

Source: https://github.com/dart-lang/angular_components_example/blob/134f9b0671ddc1142a445f182637f9e78b2a49f6/example/material_icon_example/lib/material_icon_demo.html#L37

material-icon {
  color: white;
}

How to change material-icon color to white of angular_components in an Angular Dart project?

1 Answers1