[SOLVED] Ion-icon not respecting hidden attribute

I recently upgraded to Ionic-angular 9.0.0/Capacitor 5.3.0/Angular 16/Node 18.17.1 and a component relying on ion-icon to show/hide the password being typed stopped working correctly. I see both icons when I should see one. It appears the hidden attribute is not being respected. This worked before the upgrade. App is running on Android 12.

Anyone else see this?

By the way, the code is from this tutorial.



import { Component, ContentChild } from '@angular/core';
import { IonInput } from '@ionic/angular';
  selector: 'app-show-hide-password',
  templateUrl: './show-hide-password.component.html',
  styleUrls: ['./show-hide-password.component.scss'],
export class ShowHidePasswordComponent {
  public showPassword = false;
  @ContentChild(IonInput) input: IonInput;
  constructor() {}

  public toggleShow() {
    this.showPassword = !this.showPassword;
    this.input.type = this.showPassword ? 'text' : 'password';


<a class="type-toggle" (click)="toggleShow()">
   <ion-icon class="show-option" [hidden]="showPassword" name="eye-off-outline"></ion-icon>
   <ion-icon class="hide-option" [hidden]="!showPassword" name="eye-outline"></ion-icon>


:host {
  display: flex;
  width: 100%;
  align-items: center;
.type-toggle {
    padding-inline-start: 0.5rem;
    .hide-option {
      font-size: 1.2rem;
      display: block;
      &:not(ion-icon) {
        text-transform: uppercase;
        font-size: 1rem;

Whatever the problem is, it also affects ion-img.

Solved. My Google fu was off. Didn’t see this at first.