Ionic 4 icons weird behaviour

#1

There is some weird staff going on with icons in Ionic 4. I have all the latest versions on everything and a new blank project with sidemenu. When I change sidemenu close button icon to name=“close”, nothing shows up. And when I change it to something else eg. close-circle-outline, icon will show up. There are some other icons too that do not show up (like in tabs, not just menu). I also googled the issue and tried some suggestions, like emptying browser cache, but still could not make it work. Maybe someone else has the same issue and would like to share there thoughts on this.

#2

Can you show your code when it works and doesn’t work?
That might help us to see where the issue lies.

#3
<ion-menu menuId="sideMenu">
  <ion-header no-border>
    <ion-toolbar>
      <ion-buttons slot="start">
          <ion-button>
              <ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
            </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list no-lines>
      <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
        <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
          <ion-icon slot="start" [name]="p.icon"></ion-icon>
          <ion-label>
            {{p.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-router-outlet main></ion-router-outlet>

That one is the working code. If I change just icon name from “close-circle-outline” to just “close” the icon will disappear. Weird. Also eg. icon name=“exit” will not appear.

To add, this is only on ionic serve and Chrome. Have not tried on real device.

#4

I’ve tried this using the sidemenu template and everything show up correctly.

This is my app.component.html
Maybe you want to generate a new project (where the icons should show up) and compare both the see where you might miss something

<ion-app>
  <ion-split-pane>
    <ion-menu>
      <ion-header>
        <ion-toolbar>
            <ion-buttons slot="start">
                <ion-button>
                    <ion-icon slot="icon-only" name="close"></ion-icon>
                  </ion-button>
            </ion-buttons>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>
#5

I HAVE generated a new project and it’s the same. That is the weird part. I can’t figure this out. But for now, it’s not that big of an issue to me.

Ionic:

ionic (Ionic CLI) : 4.10.2 (C:\Users*****\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.1
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.3.0

System:

NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.7.0
OS : Windows 10

#6

That’s pretty weird.
Everything seems up to date, even npm and NodeJS.

Have you tried a different browser or even a different pc?
Just to know if the issue could be browser or pc-related.