Align a text inside toolbar to the right - ionic-framework

Question

I am trying to align an image and a text to the right and left of the header, like they were navigation buttons.
This doesn't work as expected even editing the CSS with the ugly !important tag.
Hope you could help me.
I am running Ionic 5.2.7 and using Ionic lab to visualize my app.
<ion-header>
<ion-toolbar color="primary">
<ion-title text-center>
%name%
</ion-title>
<ion-text>
<img src="/assets/star.svg" class="rep-icon" />
<div class="rep">%rep%</div>
</ion-text>
<ion-text>
<img src="/assets/star.svg" class="coins-icon" />
<div class="coins">%$%</div>
</ion-text>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<img src="/assets/shapes.svg" alt="" />
<ion-card-header>
<ion-card-subtitle>hh:mm dd MM</ion-card-subtitle>
<ion-card-title>Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
commodo orci in dapibus efficitur. Pellentesque nisi urna, dictum non
rhoncus ac, tempus eu augue...
</p>
</ion-card-content>
</ion-card>
</ion-content>
This is the result.
https://prnt.sc/p547nl
Thanks in advance

Answer 1

I think you should stick with using Ionic's components, you can achieve that by doing something like this
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button color="light">
<ion-icon name="star"></ion-icon>
Star 2
</ion-button>
</ion-buttons>
<ion-title text-center>{{ name }}</ion-title>
<ion-buttons slot="end">
<ion-button color="light">
<ion-icon name="star"></ion-icon>
Star 2
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
If you want to have a custom icon you can see this link.

Answer 2

Use it like this for your toolbar
<ion-header>
<ion-toolbar>
<ion-text>
<img src="/assets/star.svg" class="rep-icon" />
<div class="rep">%rep%</div>
</ion-text>
<ion-title>
%name%
</ion-title>
<ion-text>
<img src="/assets/star.svg" class="rep-icon" />
<div class="rep">%rep%</div>
</ion-text>
</ion-toolbar>
</ion-header>