title: Angular Navbar Issue
body: <p>I used <code>@angular/material:navigation &lt;component-name&gt;</code> to install Schematics, for having a responsive design.</p>
  <p>My ts looks like:</p>
  <pre><code>import { Component, ElementRef, ViewChild } from '@angular/core';
  import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  import { Observable } from 'rxjs';
  import { map, shareReplay } from 'rxjs/operators';
  
  @Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss'],
  })
  export class NavbarComponent {
  
    isSmall$: Observable&lt;boolean&gt; = this.breakpointObserver.observe(Breakpoints.Small)
      .pipe(
        map(result =&gt; result.matches),
        shareReplay()
      );
      
    constructor(private breakpointObserver: BreakpointObserver) {}
  
  }
  </code></pre>
  <p>I changed isHandset to isSmall. My menu Icon disappears at 600px, but I don't want it to be disappeared. I can't change my button that it should stay between 0px and 960px. Is that possible?</p>
  <p>Here is a table, how the breakpoints are defined.</p>
  <p>Is it possible for me to use 2 breakpoints on one button, for example:</p>
  <pre><code> &lt;button 
          type=&quot;button&quot;
          aria-label=&quot;Toggle sidenav&quot;
          mat-icon-button
          (click)=&quot;drawer.toggle()&quot;
          *ngIf=&quot;(isSmall$ | async)&quot;&gt; 
          &lt;mat-icon aria-label=&quot;Side nav toggle icon&quot;&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
  </code></pre>
  <p>That's how my button looks like, but I want it to be:</p>
  <pre><code> &lt;button 
          type=&quot;button&quot;
          aria-label=&quot;Toggle sidenav&quot;
          mat-icon-button
          (click)=&quot;drawer.toggle()&quot;
          *ngIf=&quot;(isSmall$ &amp;&amp; isXSmall | async)&quot;&gt; 
          &lt;mat-icon aria-label=&quot;Side nav toggle icon&quot;&gt;menu&lt;/mat-icon&gt;
        &lt;/button&gt;
  </code></pre>
  <p>I added to ngIf <code>*ngIf=&quot;(isSmall$ &amp;&amp; isXSmall | async)&quot;&gt; </code>, I know that this isn't possible, but that is how I want it to be. Two breakpoints, that my menu icon stays active until I am at 960px, after that it should disappear.
  None of the Angular breakpoint options stays between 0 and 960px.</p>
  <p>If you guys could help me I would really appreciate it.</p>