ipsos-components/src/demo-app/toolbar/toolbar-demo.html

Material Design components for Angular

<div class="demo-toolbar">

  <p>
    <mat-toolbar>
      <mat-icon class="demo-toolbar-icon">menu</mat-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <mat-icon>code</mat-icon>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <mat-icon class="demo-toolbar-icon">menu</mat-icon>
      <span>Primary Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <mat-icon>code</mat-icon>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="accent">
      <mat-icon class="demo-toolbar-icon">menu</mat-icon>
      <span>Accent Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <mat-icon>code</mat-icon>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="accent">
      <mat-toolbar-row>First Row</mat-toolbar-row>
      <mat-toolbar-row>Second Row</mat-toolbar-row>
    </mat-toolbar>
  </p>

  <p>
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <span>First Row</span>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <span>Second Row</span>

        <span class="demo-fill-remaining"></span>

        <mat-icon class="demo-toolbar-icon">verified_user</mat-icon>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <span>Third Row</span>

        <span class="demo-fill-remaining"></span>

        <mat-icon class="demo-toolbar-icon">favorite</mat-icon>
        <mat-icon class="demo-toolbar-icon">delete</mat-icon>
      </mat-toolbar-row>
    </mat-toolbar>
  </p>
</div>