"ion-button + icon-only" inside component not working

Question

I'm using Ionic 3.*, tring to create a component that contains just a button.

The component code is:

@Component({
  selector: 'profile-button',
  templateUrl: 'profile-button.html',
})
export class ProfileButtonComponent {
  constructor(
    private popoverCtrl: PopoverController
  ) {}

  /**
   * Present the Profile popover
   * @param ev
   * @returns {Promise<any>}
   */
  async presentPopover(ev) {
    let popover = this.popoverCtrl.create(ProfilePopover);

    return popover.present({
      ev
    });
  }
}

and my template is:

<button ion-button icon-only (click)="presentPopover($event)" title="Profile">
    <ion-icon name="person"></ion-icon>
</button>

The problem:

The problem is that the icon-only directive is just ignored. The button still have a background color. If I put the template outside the component, it shows the right style.

Looks like the directives is not available inside a Component. My component is inside a custom module, not on AppModule.

How can I solve this? Found that on Ionic2 i need to import the directives manually, but it don't work on Ionic3.

Answer 1

I've solved the issue, maybe with an workarround:

1. Changed the component selector to attribute selector: [profile-button]
2. Wrapped the template in a <ion-buttons end> tag
3. Called the component as an attribute of <ion-buttons end>

<ion-buttons profile-button end></ion-buttons>

Note: The issue wasn't with icon-only directive. But it's a style issue on Ionic that required the button directly child of the toolbar or ion-buttons to get proper styles.

Answer 2

I found solution on another S.O. thread.

In your *.module.ts add IonicModule into imports section.

@NgModule({
  imports: [
    CommonModule,  // <-- standard Angular module
    IonicModule    // <-- standard ionic module
  ], ...
})