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 ?

[JaxonWright]

@JWess in order for your workaround to work in IE11, you need to change width from unset to auto, which is the default value.

[crisbeto]

This is supported in the MDC version of the FAB which will become the default eventually. If you want to start using it now, you can import the MatButtonModule from @angular/material-experimental/mdc-button and use an extended FAB like this:

<button mat-fab extended>
  <mat-icon>check</mat-icon>
  Search
</button>

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}