Custom icons don't work for me...

[kacan98]

I am trying to change to custom icons. I tired many different ways to pass the icons to the customStarIcons input and it does not work for me:

scr/app/app.component.html:

  <ngx-stars color="white" [customStarIcons]="iconUrls"></ngx-stars>  <!-- This exists in the dom, but no icons shown -->
  <ngx-stars></ngx-stars>  <!-- this displays -->
  <img src="../assets/star-outline.svg" alt="hello"> <!-- this displays -->

scr/app/app.component.ts:

export class AppComponent implements OnInit {
  iconUrls = {
    empty: '../assets/star-outline.svg',
    half: '../assets/star-half.svg',
    full: '../assets/star.svg',
  };
  ...}

scr/app/app.module.ts:

  
  @NgModule({
  declarations: [AppComponent],
  imports: [
...
    NgxStarsModule,
    

And these exist:

scr/assets/icon.svg
scr/assets/icon-outline.svg
scr/assets/icon.svg

Could be useful to see the source code for the demo page :)

[hughjdavey]

Hi @kacan98 thanks for raising the issue. I will look into this soon but in the meantime, the relevant sections of source code are

app.component.html

...
<h2>Customize icons</h2>
<h6>Following icons sourced from <a href="http://www.onlinewebfonts.com/icon">Icon Fonts</a> and licensed by CC BY 3.0</h6>
<ngx-stars [readonly]="true" [size]="2" [initialStars]="1.5" [customStarIcons]="curvyStarUrls"></ngx-stars>
<ngx-stars [readonly]="true" [size]="2" [initialStars]="2.5" [customStarIcons]="heartUrls"></ngx-stars>
<ngx-stars [readonly]="true" [size]="2" [initialStars]="3.5" [customStarIcons]="circleUrls"></ngx-stars>
...

app.component.ts

export class AppComponent {
  ...
  curvyStarUrls = {
    empty: '../assets/curvy-star-empty.svg',
    half: '../assets/curvy-star-half.svg',
    full: '../assets/curvy-star-full.svg',
  };

  heartUrls = {
    empty: '../assets/heart-empty.svg',
    half: '../assets/heart-half.svg',
    full: '../assets/heart-full.svg',
  };

  circleUrls = {
    empty: '../assets/circle-empty.svg',
    half: '../assets/circle-half.svg',
    full: '../assets/circle-full.svg',
  };
  ...
}

The app structure showing the assets folder looks like

[hughjdavey]

All the code you posted looks fine so I don't have an immediate theory as to what the issue is. Is it possible to put up an example of it not working on a branch I could check out or something? I am assuming "src/assets" is listed under assets in your angular.json? Is there anything in the console when they fail to load? And does anything get displayed on the page?

[hughjdavey]

Actually I have just noticed in your example, the names in your ts file (star-outline.svg, star-half.svg and star.svg) do not match the names in your assets folder (icon.svg and icon-outline.svg) - could this be it?

[hughjdavey]

Hi did you ever get this working?