ngx-sharebuttons isn't showing icons

[eufelipemateus]

File package.json

{
  "name": "microblog-felipefm32",
  "version": "3.0.2",
  "scripts": {
    "ng": "ng",
    "start": "npm run fcm && ng serve",
    "build": "npm run fcm && ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "fcm": "concat www/ngsw-worker.js src/fcm.js -o www/combined-worker.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.5",
    "@angular/cdk": "^6.2.1",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.2.1",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "^6.0.3",
    "@angular/service-worker": "^6.0.3",
    "@fortawesome/angular-fontawesome": "0.1.0-10",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "@ngx-loading-bar/core": "^2.1.0",
    "@ngx-share/button": "^6.0.1",
    "@ngx-share/buttons": "^6.0.1",
    "@ngx-share/core": "^6.0.1",
    "angularfire2": "^5.0.0-rc.10",
    "angulartics2": "^6.1.0",
    "core-js": "^2.5.4",
    "firebase": "^5.0.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "ngx-infinite-scroll": "^6.0.0",
    "ngx-store": "^2.0.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "concat": "^1.0.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

File app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule,HttpClientJsonpModule } from '@angular/common/http';
import { FormsModule,ReactiveFormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

//Firebase
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireStorageModule } from 'angularfire2/storage';
//Material
import { MaterialModule } from './material.module';
//WebStorage
import { WebStorageModule } from 'ngx-store';
//Services
import { MessagingService } from '../services/notifications/messaging';
import { PostService,UrlAttachmentService,ImageService } from '../services/firebase/firebase.service';
import { MetadataService } from '../services/url/metadata.service';
import {PushNotificationsService} from '../services/notifications/push.notification.service';

//Google Analitics
import { Angulartics2Module } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'

//InfiniteScroll
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
//ShareButtons
import { ShareModule  } from '@ngx-share/core';
import { ShareButtonsModule } from '@ngx-share/buttons';
//FontAwesome
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
//Loaging Bar
import { LoadingBarModule } from '@ngx-loading-bar/core';

//Paginas
import { HomePage,PostPage,LoginPage,WritePage } from '../pages/pages';
//Compoenents
//Actions
import { DeletePostActions } from '../components/components';

//Rotas
import { AppRoutingModule } from './app-routing.module';

//SetBrasilLocale
import { registerLocaleData } from '@angular/common';
import localePr from '@angular/common/locales/pt';
// the second parameter 'pt' is optional
registerLocaleData(localePr, 'pt');

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        PostPage,
        LoginPage,
        WritePage,
        DeletePostActions

    ],
    entryComponents: [
        DeletePostActions
    ],
  imports: [
    BrowserModule,
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
    Angulartics2Module.forRoot([ Angulartics2GoogleAnalytics ]),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule,
    MaterialModule,
    HttpClientModule,
    HttpClientJsonpModule,
    InfiniteScrollModule,
    ShareModule.forRoot(),
    ShareButtonsModule.forRoot(),
    FontAwesomeModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    LoadingBarModule.forRoot(),
    WebStorageModule,

  ],
  providers: [AngularFireAuthModule,PostService,UrlAttachmentService,ImageService,MetadataService,PushNotificationsService,MessagingService],
  bootstrap: [AppComponent]
})
export class AppModule{} 

File post.ts

import { Component } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import {MatBottomSheet } from '@angular/material';
import { AngularFireAuth } from 'angularfire2/auth';
import { ShareButtons } from '@ngx-share/core';
import { PostService,UrlAttachmentService,ImageService } from '../../services/firebase/firebase.service';
import {map} from 'rxjs/operators';
import { Post,UrlAttachment,Image } from '../../models/models';
import { DeletePostActions } from '../../components/components';
import { LoadingBarService } from '@ngx-loading-bar/core';

@Component({
  selector: 'page-post',
  templateUrl: 'post.html',
  styleUrls: ['./post.scss']
})
export class PostPage {

    post;
    user;
    id;
    //Construtor
    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private afAuth: AngularFireAuth,
        public share: ShareButtons,
        private postService:PostService,
        private image:ImageService,
        private url_attachment:UrlAttachmentService,
        private bottomSheet: MatBottomSheet,
        private loadingBar: LoadingBarService) {

        this.loadingBar.start();
        //Pegar Estado do Usuario
        this.afAuth.auth.onAuthStateChanged((user)=> {
            if(user) {
                this.user = user;
            }
        }); 

        //Pegar id do post "post/:id"
        this.id = this.route.snapshot.paramMap.get('id');

        //Iniciar pegar dados do post
        this.post = this.postService.getPost(this.id).snapshotChanges().pipe(
            map(data => {
                let post =   (data.payload.val() as Post);
                if(!post) return;

                if(post.url_attachment_id){

                    this.url_attachment.getUrlAttachment(post.url_attachment_id).valueChanges().subscribe(url=>{
                        if(!url) return;
                        post.url_attachment = url as UrlAttachment;
                        post.url_attachment.img = this.image.getImage(post.url_attachment.image_id).valueChanges();
                    });
                }
                this.loadingBar.complete()
                return post;
            })
        );      
    }

}

File post.html

<mat-toolbar color="primary" role="heading">
    <button mat-icon-button    routerLink="/home" aria-label="voltar" >
      <mat-icon>keyboard_backspace</mat-icon>
    </button>
    <h2>Meu Post</h2>
    <span class="fill-remaining-space"></span>
</mat-toolbar>

<div class="container content">
    <div class="post-content" *ngIf="post | async  as p " >
        <div class="head" ><span class="number-box">{{  p.created_at | date:'d' }}</span><h2>{{ p.created_at | date:'MMMM':'':'pt' }}<span>{{  p.created_at | date:'y' }}</span></h2> <span class="time">{{ p.created_at | date:'HH:mm'}}</span></div>  
        <p>{{ p.text  }}</p>    
        <div *ngIf="p.url_attachment  as url_attachment " class="url_attachment">
            <a  href="{{ url_attachment.url }}" target="_blank" rel="noopener" class="btn" >
                <mat-card>
                    <img *ngIf="p.url_attachment.img | async as img" [src]="img.public_url" [alt]="img.alt" />
                    <mat-card-content>
                        <h2>{{  url_attachment.title }}</h2>
                        <p>{{ url_attachment.description }}</p>
                    </mat-card-content>
                </mat-card>
            </a>            
        </div>  
        <div class="links" *ngIf="p.twitter_id">
            <a href="https://twitter.com/felipefm32/status/{{ p.twitter_id }}" target="_blank" >
                Twitter
                <!--<ion-icon name="logo-twitter" style="zoom:3.0;"></ion-icon>-->
            </a>
        </div>
    </div>
    <share-buttons show="5"  [showCount]="true"></share-buttons>

</div>```

[MurhafSousli]

Did you import the icons? https://murhafsousli.github.io/ngx-sharebuttons/#/icons

[eufelipemateus]

No.. I will import now.. Thanks..

[anelad]

Using icon library as in the link throws the warning:

FontAwesome: Global icon library is deprecated. Consult https://github.com/FortAwesome/angular-fontawesome/blob/master/UPGRADING.md for the migration instructions.

[sushiie]

@anelad did u find the solution to this issue? @MurhafSousli any workaround so that we can use our own icons?

[anelad]

@sushiie, no, I do not have any solution yet. Just using as it is.

[sukhminderx]

I did this as a solution:

import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
@NgModule({
  declarations: [   
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FontAwesomeModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(library: FaIconLibrary) {
    library.addIcons(faFacebookF);
  }
}

The deprecation errors are gone but the icons are not visible.

[rnkpareek]

its working fine

[sutariavijay]

Does anyone have a solution to this issue? I did all the above workaround but none of them are working for me. I am trying to integrate this plugin in angular13 application