Using it since 1 hour, already problems: Icons not showing

Ionic Framework Ionic Angular
1

I usually am against frameworks in general, except a strict few, angular has been forced upon me, let alone ionic. These “I do everything” framework are usually horrendous, and I did the error to let this one Ionic slips once more in my developement routine by suggestion of coworkers.
Another mistake that will cost me hours of hair pulling. How this forum is poorly build should have been a big enough red flag, but I’m stubborn and blind and tend to follow advices only to end up in despair.

Meh… let’s begin.

image
image1014×418 45.9 KB

I literally generated a new ionic sidebar app, then a component with ionic generate page command.

The angular template basically loops over an array of “pages” to build a side menu:

  @for (p of appPages; track p; let i = $index) {
            <ion-menu-toggle auto-hide="false">
              <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
                <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
                <ion-label>{{ p.title }}</ion-label>
              </ion-item>
            </ion-menu-toggle>
          }

defined in the main component:

  public appPages = [
    { title: 'Chart Test', url: '/charttest', icon: 'bar-chart' },
    { title: 'Inbox', url: '/folder/inbox', icon: 'mail' },
    { title: 'Outbox', url: '/folder/outbox', icon: 'paper-plane' },
    { title: 'Favorites', url: '/folder/favorites', icon: 'heart' },

on which I added the “Chart test” route/menu.
I have then visited https://ionic.io/ionicons to see icon names (note that templates att -outline or -sharp to it) and found “bar-chart” to be the one I need.

SURPRISE SURPRISE!!!
Not a single damn icon shows!!!

On the forementioned site we have

<ion-icon name="bar-chart-sharp"></ion-icon>
<ion-icon name="bar-chart-outline"></ion-icon>
<ion-icon name="bar-chart"></ion-icon>

I also copied all the same ionic imports from the working pages (where icons show) on the new chart test component

Yes, I tried 3 different browser, even in incognito mode. Even on different machines.

Jesus… why I’m even writing this… this thing breaks at the most basic stuff… :smiling_face_with_tear: I don’t want to imagine what happens when I build a multi platform release

2

Did you import the icon?

2 Likes
3

So you’re new to Angular and Ionic, and you haven’t thought about checking the official docs? Instead of spending hours pulling your hair out, why not take a look at the docs? You might be surprised by what you discover! Engineering 101 my guy…

2 Likes
5

Lmao, did you skip elementary school or just have text comprehension problems? How you think I came up with the new ionic project (and god knows where you get that I am new to angular lol)? By myself? Where do you think I got that ionic icons link? Out of thin air or from the docs?

Reading 101 my guy

Btw the solution for @twestrick that is at least being helpful, is that this awful thing actually have in the constructor this:

constructor() {
    addIcons({ mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, heartOutline, heartSharp, archiveOutline, archiveSharp, trashOutline, trashSharp, warningOutline, warningSharp, bookmarkOutline, bookmarkSharp, barChart, barChartOutline, barChartSharp });
  }

Of which i had to add the last 3.

Lmao, this is the first time ever in any angular project, or font/icon pack like fontawesome and simialr that I see importing the icons manually 1 by one. jesus

Well, thanks anyway I guess

6

Wow, I think that was probably the worst possible way you could have introduced yourself.

4 Likes
7

Do you want performance? Importing a full pack of hundred of icons is worst than importing only what you need.
BTW, Angular Material does the same since v15/16, don’t remember, but you must import icons individually.

Also, the recommended way to work in Ionic, if you use standalone, now is to import elements one by one, not the “Module”

1 Like