Guideline about overriding SVG icons

In the doc, there is no straight-forward guideline about overriding the back and forward icons. So I jumped into the source code and found out that you need to pass an object to svgIconOverrides attribute.

material2-carousel/projects/carousel/src/lib/carousel.ts

Lines 25 to 28 in 78de02c

    
           export interface SvgIconOverrides { 
        
             arrowBack: string; 
        
             arrowForward: string; 
        
           }

Here I tried all possible ways to change the default icons, but no luck!
@gabrielbusarello, can you help please?

Hello, @msrumon.

Do it like this:

Copy svg icons files to the assets folder.

Then, prepare the svgIconOverrides object and register your svg icons inside component.ts file:

import { Component, Input, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { SvgIconOverrides } from '@ngbmodule/material-carousel';
import { Item } from './item.model';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.scss']
})
export class ItemComponent implements OnInit {
  @Input()
  item: Item;

  icons: SvgIconOverrides = {
    arrowBack: 'arrow_back',
    arrowForward: 'arrow_forward'
  };

  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'arrow_back',
      sanitizer.bypassSecurityTrustResourceUrl('assets/images/layout/arrow-back.svg')
    );

    iconRegistry.addSvgIcon(
      'arrow_forward',
      sanitizer.bypassSecurityTrustResourceUrl('assets/images/layout/arrow-forward.svg')
    );
  }

  ngOnInit() {}
}

Then, place your carousel inside your component.html file:

  <div [style.height]="'auto'">
    <mat-carousel
      timings="250ms ease-in"
      [autoplay]="false"
      color="primary"
      maxWidth="auto"
      slides="8"
      [loop]="true"
      [hideArrows]="false"
      [hideIndicators]="false"
      [useKeyboard]="true"
      [useMouseWheel]="false"
      [maintainAspectRatio]="true"
      [proportion]="(300 / 321) * 100"
      orientation="ltr"
      [svgIconOverrides]="icons"
    >
      <mat-carousel-slide
        #matCarouselSlide
        *ngFor="let slide of item.images; let i = index"
        [image]="'assets/images/gallery/items/' + slide"
        [hideOverlay]="true"
      ></mat-carousel-slide>
    </mat-carousel>
  </div>

The key binding is [svgIconOverrides]="icons".
You are actually overriding the mat-icon svgIcon property.

This is the original carousel code where the binding happens:

<mat-icon
*ngIf="svgIconOverrides?.arrowBack; else: defaultArrowBack"
[svgIcon]="svgIconOverrides.arrowBack"></mat-icon>
<ng-template #defaultArrowBack>
  <mat-icon>arrow_back</mat-icon>
</ng-template>

Hi, thanks for the response @micobarac.

Sorry for late, but this year is been so much tiring, I will take care of this project more, but it's hard by now, sorry one more time.

I have some features annoted for do to this project, but I have no time yet, if still have any issues in this case, let me know, and I will take care of it.

Stay safe! Hugs!

@gabrielbusarello, thanks for this great library!. 🍻🍻🍻

Thanks to both of you. It's been late, but I figured it out way back (maybe after 2 days from issuing this ticket) by looking at the source code. Anyway, I wish all the best for this library.

	export interface SvgIconOverrides {
	arrowBack: string;
	arrowForward: string;
	}