bug: Ionic v8 addIcon not working with composed name icons

[hbapps20]

Current Behavior

I'm trying to use multiple ionic icons in my application, but only the simple ones are working for example: exit, calendar, add. If I try

it is not working.

Here are some examples:

html
<ion-footer> <ion-list> <ion-menu-toggle menu="m1"> <ion-item lines="none" (click)="onLogout()" button> <ion-icon name="exit" slot="start"></ion-icon> <ion-label>Salir</ion-label> </ion-item> </ion-menu-toggle> </ion-list> </ion-footer>

ts

import { ellipsisVerticalOutline, exit } from "ionicons/icons";
import { addIcons } from "ionicons";
export class AppComponent implements OnInit, OnDestroy {
...
constructor(
private platform: Platform,
//rivate splashScreen: SplashScreen,
//private statusBar: StatusBar,
private authService: AuthService,
private locationService: LocationService,
private router: Router,
private menuCtrl: MenuController,
private alertCtrl: AlertController,
//private messagingService: MessagingService,
// private translateService: TranslateService
) {
this.initializeApp();
addIcons({exit,ellipsisVerticalOutline});
}

}

If I change html for:
<ion-footer> <ion-list> <ion-menu-toggle menu="m1"> <ion-item lines="none" (click)="onLogout()" button> <ion-icon name="ellipsis-vertical-outline"></ion-icon> <ion-label>Salir</ion-label> </ion-item> </ion-menu-toggle> </ion-list> </ion-footer>

Not Working.

Expected Behavior

That the icon I'm using shows

Steps to Reproduce

Use some basic icons with no composed names like exit, calendar
Then use some icons like

Code Reproduction URL

No response

Additional Information

No response

[liamdebeasi]

Do you have a runnable sample that can be used to reproduce the issue? Also make sure you are using the latest version of Ionicons.

[manubravo]

hi, i've the same problem. How does it update? im using Angular 18.0.0, ionic 8.0.0 & "ionicons": "^7.2.1".
I have followed the official docs to start my first application in Ionic with angular .... but the icons do not work.
I've executed the last version (npm install ionicons@latest) & still not working with 7.4.0

[liamdebeasi]

The team needs a runnable sample in order to reproduce the issue. If one is not provided, then the team may close this as they will be unable to reproduce the problem.

[manubravo]

Ok, I'll attach screenshots later, maybe I'm missing something, but I'm following the official documentation which makes a simple app to take pictures

[hbapps20]

@manubravo what I did was to download the svg icon from ionic icon's library icons and download it in my assets folder, then use it like this:

html - icon_whatsaap.svg

<ion-row class="ion-no-margin ion-no-padding">
              <ion-list style="margin-left:22px;margin-right: 25px; width: 100%;">
                <ion-item lines="full" (click)="onShareContentWa()" style="--border-color:rgba(0, 0, 0, 0.03);">
                  <ion-icon color="medium" src="../../../../assets/icons/icon_whatsaap.svg"></ion-icon>
                  <ion-label>
                    <h3 style="margin-left:40.5px;color:var(--ion-color-medium,lightgrey);">Enviar Whatsaap</h3>
                  </ion-label>
                </ion-item>      
              </ion-list>
            </ion-row>

This would provide you with the same ion-icon properties. However, I still believe there is a bug with the ionic-icons.

[liamdebeasi]

A runnable sample (such as an app in a GitHub repo) would be better instead of screenshots because it ensures the team can reproduce the issue on their computers.

[ionitron-bot]

This issue has been labeled as help wanted. This label is added to issues that we believe would be good for contributors.

If you'd like to work on this issue, please comment here letting us know that you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.

For a guide on how to create a pull request and test this project locally to see your changes, see our contributing documentation.

Thank you!