How to apply mini variant drawer in App layout with angular components in AngularDart

I want to apply mini variant permanent drawer in the app layout of angular components with Angular Dart in my project. I tried but didn't succeeded, how can I do that?

Applying the css gives the following result, how can I change the drawer size.

material-drawer {
        max-width: 56px;
    }

app_component.html

<material-drawer persistent #drawer="drawer" [attr.end]="end ? '' : null">
    <material-list *deferredContent>
        <div group class="mat-drawer-spacer"></div>
        <div group>
            <material-list-item>
                <material-icon icon="home"></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>
        <div group>
            <div label>Tags</div>
            <material-list-item>
                <material-icon icon="star"></material-icon>
            </material-list-item>
        </div>
    </material-list>
</material-drawer>

<material-content>
    <header class="material-header shadow">
        <div class="material-header-row">
            <material-button icon
                             class="material-drawer-button" (trigger)="drawer.toggle()">
                <material-icon icon="menu"></material-icon>
            </material-button>
            <span class="material-header-title">Tushar Rai</span>
            <div class="material-spacer"></div>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 1</a>
            </nav>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 2</a>
            </nav>
            <nav class="material-navigation">
                <a href="#AppLayout">Link 3</a>
            </nav>
        </div>
    </header>

    <div class="app-layout">
        <p>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.
        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.
        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.
        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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
        <p>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.
            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.
            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.
            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.
        </p>
    </div>

    <div class="controls">
        <h3>Options</h3>
        <material-toggle [(checked)]="end" label="end">
        </material-toggle>
    </div>
</material-content>

app_component.scss

@import 'package:angular_components/css/material/material';

:host {
  border: 1px solid;
  display: block;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 800px;
}

.controls {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

a:link, a:visited, a:active, a:hover {
  color: $mat-white;
  text-decoration: none;
}

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_components/app_layout/material_persistent_drawer.dart';
import 'package:angular_components/content/deferred_content.dart';
import 'package:angular_components/material_button/material_button.dart';
import 'package:angular_components/material_icon/material_icon.dart';
import 'package:angular_components/material_list/material_list.dart';
import 'package:angular_components/material_list/material_list_item.dart';
import 'package:angular_components/material_toggle/material_toggle.dart';
import 'package:tr_app/src/firebase_service.dart';

@Component(
    selector: 'my-app',
    directives: const [
      materialDirectives,
      NgIf,
      DeferredContentDirective,
      MaterialButtonComponent,
      MaterialIconComponent,
      MaterialListComponent,
      MaterialListItemComponent,
      MaterialPersistentDrawerDirective,
      MaterialToggleComponent,
    ],
    providers: const [
      materialProviders,
    ],
    templateUrl: 'app_component.html',
    styleUrls: const [
      'app_component.css',
      'package:angular_components/app_layout/layout.scss.css',
    ])
class AppComponent {
  bool end = false;
  final FirebaseService service;
  AppComponent(this.service);
}

You are super close I would suggest doing two things: a) Flip the order of app_component.scss and layout.scss.css. This allows the overrides to be the same specificity and still apply. b) How far the drawer opens is handled by the margin width of the content. So your CSS should look like this:

material-drawer[persistent] + material-content {
  margin-left: 56px;
}

material-drawer {
  max-width: 56px;
}