Icons not being shown

[Dellos7]

Hello @peterpeterparker,

I just can't get to show the icons. I'm trying to use the webcomponent in an Ionic/Angular app.

That's how I see the popup:

Code:

  <web-social-share style="--web-social-share-height: 140px;" [show]="false" [share]="webSocialShareOptions" (closed)="close()" id="wss-{{ index + 1 }}">
      <ion-icon name="logo-facebook" style="font-size:48px" slot="facebook"></ion-icon>
    <ion-icon name="logo-twitter" style="font-size:48px" slot="twitter"></ion-icon>
  </web-social-share>

this.webSocialShareOptions = {
  displayNames: true,
  config: [{
    facebook: {
      socialShareUrl: 'https://fluster.io'
    }
  },{
    twitter: {
      socialShareUrl: 'https://fluster.io'
    }
  }]
};

Was trying the solutions at #10 but I just can't get it working.

Thank you.

David.

[peterpeterparker]

@Dellos7 try to add a display: block on the <ion-icon.../>

<ion-icon style="display: block;"/>

if that's the solution, sorry, I think it has already been reported but I didn't took the time to add some css in the component or add at least a notice in the documentation

plz let me know if that solves the issue, hope so...

[Dellos7]

Hey @peterpeterparker,

Worked like a charm, as well as the webcomponent itself 💃

You don't have to apologize, this is open source you know, we should say thank you for your great contributions.

Just creating a PR to add this in the readme so it may help anyone else and you don't have to waste time.

[peterpeterparker]

@Dellos7 happy to hear it worked out and thx a lot for the PR, that's super cool 👍

I'll merge it later and also modify it a bit, actually the display=block is maybe only "mandatory" for ion-icons, turns out that if you are for example using font awesome nothing has to be explicity set