I’ve got modal, where, instead of writing “Close” on the left part of the toolbar, I want to display only an icon. I followed the ionic-conference-app template (https://github.com/driftyco/ionic-conference-app/blob/3fd0a108cc000675731a15201e8f2b4083b1fdc8/src/pages/schedule-filter/schedule-filter.html) and just replace the text with an ion-icon like following:
<ion-header>
<ion-toolbar>
<ion-buttons start no-shadow>
<button ion-button (click)="close()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>MYAPP</ion-title>
</ion-toolbar>
</ion-header>
This works fine except that I noticed that the icon doesn’t inherit the padding and font-size attributes like a menuToggle. Meaning these css attributes are missing (in case iOS) and the icon doesn’t look great (no padding, too small):
.bar-button-menutoggle-ios ion-icon {
padding: 0 6px;
font-size: 2.8rem;
}
Do I miss an attribute to add to my button?