Components: feature: extended FAB (Floating Action Button)

[donroyco]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

To have the Extended FAB (Floating Action Button) as a Material component, as designed in the Google Material Design.

See for more examples the Google Material Design documentation.

What is the current behavior?

There's currently no (extended) FAB to use when you can't explain an action with only an icon (as the FAB itself is designed for).

What is the use-case or motivation for changing an existing behavior?

To follow the Google Material Design and its components. There's now no component to provide the kind of interaction a FAB has plus a text label.

Is there anything else we should know?

It was already mentioned before in #11534, but it was closed due to not following the issue template.

[JaxonWright]

This would be a great addition. Really, anything introduced in Material Design 2.0 would be amazing if added.

[kill33]

That's a great addition.
And there is some implemention and discussion in #860 md-fab-speed-dial.

[JWess]

Workaround that looks pretty close:

<button class="extended-fab-button" mat-fab color="primary">
  <mat-icon>speaker_notes</mat-icon>
  <span class="extended-fab-button__text">Notes</span>
</button>

.extended-fab-button {
  width: unset;
  padding: 0 26px;
  border-radius: 29px;

  .mat-icon {
    margin-right: 10px;
  }

  .extended-fab-button__text {
    font-weight: 300;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
}

[dshukertjr]

Is this feature not coming?

[BobDankert]

Any updates on this? Are there any particular challenges with this issue?

[guss77]

Workaround works well, but I would love to see this supported by the MatButton component itself. What happened with #15645? looks like a lot of good work?

[evilangelmd]

any information about #15645 @josephperrott , @jelbourn ?