Skip to content

Icons Guide

Murhaf Sousli edited this page May 31, 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 withIcons inside provideShareButtonsOptions to import all share buttons icons.

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

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

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
      })
    )
  ]
};