Custom ion-item doesn't have item-button class on buttons

Ionic Framework ionic-v3
1

Hi, I want to create a custom ion-item, where the avatar and name are the same but the content changes.

This is the original component that works as expected:

<ion-item>
  <ion-avatar item-left>
    <img [src]="participant.profilePicture" />
  </ion-avatar>
  <h2>{{participant.displayName}}</h2>
  <p>Represents {{participant.represents}}</p>

  <button ion-button icon-only clear item-right (click)="editParticipant();">
    <ion-icon color="primary" name="create"></ion-icon>
  </button>

  <button ion-button icon-only clear item-right (click)="removeParticipant()">
    <ion-icon color="danger" name="close-circle" showWhen="android,windows"></ion-icon>
    <ion-icon color="danger" name="remove-circle" showWhen="ios"></ion-icon>
  </button>

</ion-item>

And this is the component I created (<common-participant>)

<ion-item>
  <ion-avatar item-left>
    <img [src]="participant.profilePicture" />
  </ion-avatar>
  <h2>{{participant.displayName}}</h2>
  <p>Represents {{participant.represents}}</p>
  <ng-content item-end></ng-content>
</ion-item>

When I use my custom component I pass the content:

<common-participant [participant]="participant">

  <button ion-button icon-only clear item-right (click)="editParticipant();">
    <ion-icon color="primary" name="create"></ion-icon>
  </button>

  <button ion-button icon-only clear item-right (click)="removeParticipant()">
    <ion-icon color="danger" name="close-circle" showWhen="android,windows"></ion-icon>
    <ion-icon color="danger" name="remove-circle" showWhen="ios"></ion-icon>
  </button>

</common-participant>

The problem is that in my custom component the buttons don’t have the class item-button so the size is not correct. If I add the class manually to the buttons using common-participant it works okay, but I don’t think this is the right choice.

The image shows the first element working as expected and the second one is

<common-participant>

19 PM
Screen Shot 2017-09-16 at 9.05.19 PM.png391×543 36.6 KB

49 PM
Screen Shot 2017-09-16 at 9.11.49 PM.png1062×528 119 KB 


cli packages: (/Volumes/HDD-750/Documents/projects/particip/nts/node_modules)

    @ionic/cli-utils  : 1.10.2
    ionic (Ionic CLI) : 3.10.3

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : android 6.2.3 ios 4.1.1
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node  : v8.4.0
    npm   : 5.4.1 
    OS    : macOS Sierra
    Xcode : Xcode 8.3.3 Build version 8E3004b