A very simple 5 star rating example

Try reducing the size of the star image.

I have tried reducing the size of the star image, I have discovered that the height is reduced but the width is still the same

try posting a screen shot here.

Please can you tell me how to save and fetch or calculate rating data

Is it possible to put an icon in the header/title?

yes is it possible you can try like this

  <ion-navbar>
      <ion-toolbar>
          <ion-title>Your title here</ion-title>
        </ion-toolbar>
    <ion-buttons end color="secondary">
     <button ion-button icon-only><ion-icon name="close"></ion-icon>
     </button>
     </ion-buttons>
  </ion-navbar>

Yes, it is possible = you would have to play around with the CSS code in app.scss by putting a background image in the body of the alert box:

.alertstar{
          background-image:url('../assets/icon/star.png');
          background-repeat: no-repeat;
          background-position: right top;
     button{
          width: 40px;
          margin: 0 !important;
          background-image:url('../assets/icon/star.png');
          background-repeat: no-repeat;
          background-position: center;
          color:white !important;
     }
     .alert-button-group{padding:0; margin-top: 10px; flex-direction: row; justify-content: space-around;}
     border-radius: 12px;
     .alert-wrapper{border-radius: 12px;}
}

CSS can be a right pain in the neck to get right, but it is worth trying it

image

Thank you JAR19. It works perfectly on desktop browsers.

The svg I used is not showing up on mobile browsers (chose svg to more easily change the color).

But, I’ll figure it out over time.

Make sure all the image file names are lowercase only, I often had the situation where the images are not displayed in a mobile device because of a rouge capital letter. The desktop browsers are more forgiven and don’t care if the name contains capital letters or not.

I’m using the code that I found inside the svg file. Did this so that I could more easily manipulate the color.

But I may just go back to using the file instead. And I will definitely make sure the file name is all lowercase.

Thanks again.