How do I display a dynamically selected ionicon?

Issue

I have a small button that’s meant to be some sort of close button with a somewhat dynamically-selected (i.e., pickable at runtime) image, for placing in toolbars.

close-button.component.html:

<ion-button (click)="click()">
    <ion-icon [ios]="ios" [md]="md" slot="icon-only"></ion-icon>
</ion-button>

close-button.component.ts:

// snip imports, @Component
export class CloseButtonComponent implements OnInit {
    @Input() public click: () => void;
    @Input() public direction?: string;

    protected md: string = 'close';
    protected ios: string = 'close';

    constructor() {}
    public ngOnInit(): void {
        if(this.direction) {
            this.ios = 'chevron-' + this.direction;
            this.md = 'arrow-' + this.direction;
        }
    }
}

The issue is that the icon doesn’t show up unless direction is falsy.

What am I doing wrong?

Solution

the issue is not with your dynamic selection, it is with your icons. always check the icons docs if you want to use ionic icons. Chevron and Arrow have up, forward, down and back direction, not left and right.

<ion-icon name="chevron-forward"></ion-icon>

Answered By – AmirAli Saghaei

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0