Trying to add custom svg to angular material icon registry

As the title says, I am trying to add some custom svgs that I downloaded from https://simpleicons.org/ I have put my icons in a folder called icons in the assets directory in my application. I have then injected the MatIconRegistry and DomSanitizer and added the svg like this:

constructor(
  private matIconRegistry: MatIconRegistry,
  private domSanitizer: DomSanitizer
) {
  this.matIconRegistry.addSvgIcon(
    'facebook',
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      '/assets/icons/facebook.svg'
    )
  );
  this.matIconRegistry.addSvgIcon(
    'google',
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      '/assets/icons/google.svg'
    )
  );
  this.matIconRegistry.addSvgIcon(
    'twitter',
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      '/assets/icons/twitter.svg'
    )
  );
}

I have done this in the AppComponent. In another component I am trying to use these icons. I have done this:

<div class="form-group">
    <button class="btn-block" type="button" color="secondary" mat-flat-button>
        <mat-icon>twitter</mat-icon> Continue with
        facebook
    </button>
</div>

<div>
    <button class="btn-block" type="button" color="secondary" mat-flat-button>
        <mat-icon>twitter</mat-icon> Continue with
        google
    </button>
</div>

But no icons are being shown. I figured adding to the AppComponent would allow the icons to be used anywhere. Is this a bad assumption?