Ion-icon position beside ion-card-CodePudding

I have an ion-card in an ion-footer. It has an ion-textarea in it, as it will be used for a chat window. I am trying to place an icon beside the ion-card (an arrow) so a user can submit a message.

Whether I put the icon inside the ion-card, inside the ion-card-content, inside or outside the ion-footer, it just doesnt have the right positioning. If I put it inside the footer, it doesn't even show. If I put it outside the footer, it obviously rests on top or on the bottom of the footer.

            <IonFooter style={{backgroundColor: 'white'}}>
            <IonCard style={{width: '75%'}}>
                <IonCardContent >
                    <IonTextarea placeholder="Enter message here..." value={text} ionChange={e => setText(e.detail.value)}/>
                </IonCardContent>
            </IonCard>
            <IonIcon icon={arrowForwardSharp} size={"large"} color={"black"}/>

        </IonFooter>

Inside the footer (its below but you can't see it for some reason, even if i use a black icon) Outside the footer (strangely places in a black box)

CodePudding user response：

You can try by adding a grid inside you ionCard and adapt the number of the col

<ion-footer>
<ion-card>
  <ion-card-content>
    <ion-grid>
      <ion-row>
        <ion-col><ion-textarea placeholder="Enter message here..."></ion-textarea></ion-col>
        <ion-col>
          <ion-item><ion-icon name="arrow-forward"></ion-icon></ion-item></ion-col>
      </ion-row>
    </ion-grid>
    
  </ion-card-content>
</ion-card>