Skip to content

Icons Guide

Murhaf Sousli edited this page Jun 4, 2024 · 10 revisions

Overview

<share-buttons> and <share-button> components rely on FontAwesome to display share buttons icons.

If you want to use another icon library, consider using [shareButton] directive instead.

Usage

You can use the function shareIcons() inside provideShareButtonsOptions to import all share buttons icons.

import { ApplicationConfig } from '@angular/core';
import { provideShareButtonsOptions } from 'ngx-sharebuttons';
import { shareIcons } from 'ngx-sharebuttons/icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideShareButtonsOptions(
      shareIcons()
    )
  ]
};

NOTE: If you are using ngx-scrollbar v14, use the function withIcons() instead of shareIcons().

Custom FA icons

If you want to import different icon set for the share buttons or if you don't want to import all the share icons that comes with withIcons function, you can skip it and import the icons manually.

Let's say you want to use facebook square icon instead of the default one

import { ApplicationConfig } from '@angular/core';
import { customShareButton, provideShareButtonsOptions } from 'ngx-sharebuttons'
import { faFacebookSquare } from '@fortawesome/free-brands-svg-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideShareButtonsOptions(
      // Override facebook icon
      customShareButton('facebook', {
        icon: faFacebookSquare
      })
    )
  ]
};