Search code examples
angularionic-framework

Why is the Calendar Icon Displayed Instead of the Default Right Arrow in ion-datetime?

I’m encountering an issue with the ion-datetime component in my Ionic application. When I use the ion-datetime component inside an ion-popover, the calendar icon is displayed instead of the expected right arrow.

enter image description here

This is my code

<ion-item lines="none" mode="md" class="form-item">
              <ion-label position="floating" mode="md" class="form-label">{{ 'date' | translate }}</ion-label>
              <ion-input mode="md" class="form-text" [value]="dataUser.dateOfBirth | date: 'dd-MM-yyyy'" id="date" readonly
                (click)="openPopover($event)"></ion-input>
              <ion-popover #popover trigger="date" side="bottom" event="click">
                <ng-template>
                  <ion-datetime presentation="date" [(ngModel)]="tempDate" displayFormat="dd-MM-yyyy" class="form-text" name="txtDate"
                    required>
                  </ion-datetime>
                  <ion-button expand="full" (click)="confirmDate()">{{ 'acept' | translate }}</ion-button>
                  <ion-button expand="full" color="danger" (click)="cancelDate()">{{ 'cancel' | translate }}</ion-button>
                </ng-template>
              </ion-popover>
            </ion-item>
Solution

  • I found the problem...

    ion-datetime {
  &:before {
    content: "\4c";
  }
}