How to add Icon at card right side

Hi

How I add a icon arrow-forward to Card Headers right side ,like bellow image .

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.

2 Likes

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