Angular Material: Split button

Question

How to make in Angular Material a split button? It should look similar to the Bootstrap sample I tried:

<mat-menu #appMenu="matMenu">
  <button mat-menu-item>... Black Forest</button>
  <button mat-menu-item>... Salted Caramel</button>
</mat-menu>

<mat-button-toggle-group appearance="legacy">
  <mat-button-toggle color="primary" (click)="doSomethingBig()">
    Tell me about Earl Gray Ice Cream
  </mat-button-toggle>

  <mat-button-toggle color="primary" [matMenuTriggerFor]="appMenu">
    <mat-icon>arrow_drop_down</mat-icon>
  </mat-button-toggle>
</mat-button-toggle-group>

My problems:

1. If I use the legacy as style for apperance than I have the strange effect that buttons background as transparent.
2. The option color is ignored completely. Is there a way to have different colors? Especially if I want to use two buttons of it in the same row than one could be primary and the other accent
3. If it's possible to change the background - is it possible to draw a border between the two buttons?

Answer 1

Angular Material split buttons can be obtained on the basis of mat-button-toggle-group combined with some css definitions.

Check out the following StackBlitz

Please note that mat-button-toggle does not support the color property as other Material components do (see answer https://stackoverflow.com/a/48159346/2358409).