"icon-button + icon-only" inside the component does not work

Question

I use Ionic 3. *, tring to create a component containing only a button.

Component Code:

@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:

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

Problem:

The problem is that the icon-only directive is simply ignored. The button still has a background color. If I lay out the template outside the component, it will display the correct style.

Directives appear to be unavailable within a Component. My component is inside a custom module, not on an AppModule.

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

Answer 1

I solved the problem, possibly with the desktop:

• The component selector for the attribute selector has been changed: [profile-button]
• Wrapped the template with the <ion-buttons end>
• Called by the component as the <ion-buttons end> attribute

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

Note. The problem is not with the icon-only directive. But this is a style issue on Ionic, which required the button to be directly born on the toolbar or ionic buttons in order to get the right styles.

Answer 2

In your template, try adding your content inside ionic content

 <ion-content> </ion-content> 

Answer 3

you can remove ion-button and add:

 class="disable-hover button button-ios button-clear button-clear-ios button-clear-ios-dark" 

change dark as you want.