The documentation provided by Ionic does not offer a built-in solution for this particular issue.
Nevertheless, there is a workaround using a custom class.
let actionSheet = this.actionSheetCtrl.create({
title: 'Mode',
buttons: [
{
text: 'Add to Y',
// Setting a custom class for displaying the icon
cssClass: "class_used_to_set_icon",
handler: () => {
console.log('Add to Y clicked');
}
}
],
});
actionSheet.present();
You can define the following class in your src/app/app.scss file:
.class_used_to_set_icon {
// It's recommended to place the icon in src/assets (e.g., ../assets/icon/favicon.ico)
background-image: url("path/to/your/icon") !important;
// Properly position the icon
background-repeat: no-repeat !important;
background-position: 10px 10px !important;
// Indent the text to the right of the icon
padding-left: 70px !important;
}
EDIT
Another approach involves using custom icons from a font library like icomoon:
let actionSheet = this.actionSheetCtrl.create({
title: 'Mode',
buttons: [
{
text: 'Add to Y',
// Set custom icon class and a class for better display
cssClass: "icon-drink actionSheet_withIcomoon",
handler: () => {
console.log('Add to Y clicked');
}
}
],
});
actionSheet.present();
In your src/app/app.scss file, define the following class:
// Adjust the size of the displayed icon
.actionSheet_withIcomoon { font-size: 2.4rem !important; }
// Correct font dimensions and text positioning
.actionSheet_withIcomoon .button-inner {
font-family: "Roboto", "Helvetica Neue", sans-serif;
font-weight: bold;
padding-left: 52px;
margin-top: -20px;
font-size: 1.6rem !important;
}