In "ion-fab-list" element, some buttons show up and others don't

Question

I have some buttons in the ion-fab-list element. Only one of the buttons namely "mail" shows up. Other buttons do not show up. How can this be fixed?

<ion-fab right bottom>
  <button ion-fab color="accent"><ion-icon name="arrow-dropup"></ion-icon></button>
  <ion-fab-list side="top">
    <button ion-fab class="btn-google-plus"><ion-icon name="logo-googleplus"></ion-icon></button>
    <button ion-fab class="btn-mail"><ion-icon name="mail"></ion-icon></button>

    <button ion-fab class="btn-youtube"><ion-icon name="logo-youtube"></ion-icon></button>
    <button ion-fab class="btn-twitter"><ion-icon name="logo-twitter"></ion-icon></button>
    <button ion-fab class="btn-facebook"><ion-icon name="logo-facebook"></ion-icon></button>
    <button ion-fab class="btn-linkedin"><ion-icon name="logo-linkedin"></ion-icon></button>
  </ion-fab-list>
</ion-fab>

This is a screenshot of the same. Screenshot of the error As a side note, I am using ionic v3.9.2, node v8.11.3

Only this is appearing... if you copy it many times instead of others will it show all or just 1? — Mostafa Harb, Jan 19 '20 at 18:39
@MostafaHarb it shows as many times as I type the "mail" button. — Deadman, Jan 20 '20 at 17:41
Now use any other one than mail and give he button ion-fab the class of mail(btn-mail) and try to see if it shows or not — Mostafa Harb, Jan 20 '20 at 18:30
It starts to show up if I add class of mail to other buttons. Why does this happen? — Deadman, Jan 21 '20 at 16:25
The problem is in the other classes,only the mail have correct class info to be shown as a fab, while others my not be apropriate for being as fab. — Mostafa Harb, Jan 22 '20 at 08:04

score 0 · Accepted Answer · answered Jan 23 '20 at 17:09

As suggested by Mostafa in comments, the class for icons other than mail might not be configured. Current version of ion-fab doc doesn't explicitly endorse use of class attribute. Some links to configure class for ion-fab are link1 and link2

As for showing other icons, giving them class mail fixes the issue.

In "ion-fab-list" element, some buttons show up and others don't

1 Answers1