Hi
How I add a icon arrow-forward
to Card Headers right side ,like bellow image .
You could learn HTML and CSS
You could achieve this by using the Ionic grid, documented here. You could use an ion icon for your arrow, if desired so.
You can get code in following of below :
home.page.html
<ion-card>
<ion-list>
<ion-item>
<ion-avatar slot="start">
<img src="./assets/images/avatar2.png">
</ion-avatar>
<ion-label>
<div class="align">
<h2 class="ion-text-start">Lacey Mae Howe</h2>
</div>
<p>this is Chat</p>
</ion-label>
<ion-note detail slot="end" color="primary"> <ion-icon class="arrow-mini"></ion-icon></ion-note>
</ion-item>
</ion-list>
</ion-card>
home.page.scss
.arrow-mini {
background-image: url(/assets/icon/arrow-mini.svg);
height: 20px;
max-width: 10px;
top: 5px;
background-position: center;
background-repeat: no-repeat;
margin-left: 0;
background-size: cover;
position: relative;
opacity: 0.4;
}
lets try