Newbe Dev Stack

Answer : You could use *ngIf directive here to show conditional icon. <button clear text-center (click)="toggle()"> <ion-icon name="arrow-drop down-circle" *ngIf="!visible"></ion-icon> <ion-icon name="arrow-drop up-circle" *ngIf="visible"></ion-icon> </button> You could use name property instead of creating two different ion-icon <button clear text-center (click)="toggle()"> <ion-icon [name]="visible ? 'arrow-drop up-circle' :'arrow-drop down-circle'"> </ion-icon> </button> You can create a conditional in the name= attribute <ion-icon [name]="visible ? 'arrow-dropdown' : 'arrow-dropup'"></ion-icon> This took me forever to find since there are very few examples out there for toggling icons. However, I used the Ionic 2 Icons Doc and came up with this: ts: class Toggle...

Answer : I think it has to do with an issue with npm. When using yarn to install the modules, everything works flawlessly. yarn add angularfire2 firebase tldr: Node: 8.4.0/npm: 5.2.0 has issues, yarn works You could try with: $ rm -rf node_modules/ $ npm install $ npm install angularfire2@latest --save or to change AngularFireDatabaseModule by AngularFireDatabase . I had no luck trying to reproduce your issue. I would suggest if this is still an issue for you trying the following: Check for differences between my configuration below and yours View the notes for configuring ionic3 here Reinstalling npm (sounds crazy but occasionally I do this and issues disappear and I see mine is a little newer than yours) npm configuration $npm ls -g --depth=0 /Users/pbrack/.nvm/versions/node/v8.5.0/lib ├── cordova@7.1.0 ├── cordova-check-plugins@3.0.1 ├── ionic@3.13.2 ├── ios-deploy@1.9.2 └── npm@5.4.2 Configuration Steps $ ionic start angularfire2test blank $ npm instal...

Answer : Use this special ionic CSS rule: ion-item{ --ion-background-color:#fff; } I found the working one in ionic 4. Apply the below 2 css in your .scss file where you have implemented ion-list and ion-item: ion-item { --ion-background-color: white !important; } .item, .list, .item-content, .item-complex { --ion-background-color: transparent !important; } I seem to have found a fix. You just need to add color="light" to the ion-item element. Please see below: <ion-item class="light-back" color="light"> <ion-icon name="search" color="light"></ion-icon> <ion-input required type="text" placeholder="Search for a site" color="light"> </ion-input> </ion-item> The problem is that other code gets injected based on my theme, which I set to my primary color from my variables, so I need to indicate that I am again usin...