Bring mat-icon / button to the front

Question

I have this code:

<button style="z-index: 999999" mat-fab color="primary">
  <mat-icon style="z-index: 999999" aria-label="left">chevron_left</mat-icon>
</button>

but it's still resulting in this:

I want to get the chevron icon to the front, but I am not sure what to do.

Try setting the z-index of the card – Edric Feb 04 '18 at 07:23 — Edric, Feb 04 '18 at 07:23
You should also show what your code looks like. – Edric Feb 04 '18 at 23:37 — Edric, Feb 04 '18 at 23:37

Edric · Answer 1 · 2018-02-05T00:09:15.437

1

Important note: You are strongly advised not to use inline style attributes. Please use classes instead. Reasons why

One thing you can do is, as I said in the comment above, try to set a z-index for the <mat-card> which is lower than the z-index of the FAB (aka a Floating Action Button):

<mat-card style="z-index: 9999">
  <!-- ... -->
</mat-card>

<!-- FAB -->
<button style="z-index: 999999" mat-fab color="primary">
  <mat-icon style="z-index: 999999" aria-label="left">chevron_left</mat-icon>
</button>

Demo (see styles.scss)

edited Feb 05 '18 at 00:09

answered Feb 04 '18 at 23:36

Edric

24,639
13
81
91

what's the FAB? – Alexander Mills Feb 04 '18 at 23:52
1

@AlexanderMills Floating Action Button. https://material.io/guidelines/components/buttons-floating-action-button.html – Edric Feb 05 '18 at 00:07

Bring mat-icon / button to the front

1 Answers1