I'm creating a carousel with help of the ngx-slick-carousel. Each of the slides contains a Material Card and within each card there are Material icons. When the carousel is not infinite, everything works as expected. However, when the carousel is infinite, once I reach the last slide and continue sliding right, the icons disappear. Actually the tag stays when I inspect the DOM but within it's content is missing. If I keep scrolling when I get to the first slide the icons appear again and the cycle repeats itself.
PS. I noticed that this happens only if I have registered the SVG icons like this:
this.iconRegistry.addSvgIcon('star', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/star.svg'));.
If I register them like
this.iconRegistry.addSvgIconLiteral('thumbs-up', this.domSanitizer.bypassSecurityTrustHtml(THUMBUP_ICON));
they do not disappear.
I'm creating a carousel with help of the ngx-slick-carousel. Each of the slides contains a Material Card and within each card there are Material icons. When the carousel is not infinite, everything works as expected. However, when the carousel is infinite, once I reach the last slide and continue sliding right, the icons disappear. Actually the tag stays when I inspect the DOM but within it's content is missing. If I keep scrolling when I get to the first slide the icons appear again and the cycle repeats itself.
PS. I noticed that this happens only if I have registered the SVG icons like this:
this.iconRegistry.addSvgIcon('star', this.domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/star.svg'));.If I register them like
this.iconRegistry.addSvgIconLiteral('thumbs-up', this.domSanitizer.bypassSecurityTrustHtml(THUMBUP_ICON));they do not disappear.Stackblitz sample -> here