How to change the color of custom icons in an action sheet ionic?

Ionic Framework ionic-v3
1

I want to change the color of the custom icons (generated with IcoMoon) embedded in the following Action Sheet. I am working with Ionic Framework Version: 3.1.1

image

This is how look the three files related with the view:

groups.html

<ion-card>

	<img src="../../assets/img/groups/acoustics group.jpg"/>

	<ion-card-content>
		<ion-card-title>
			<ion-row>
				<ion-col class="settitle">
					Acoustics
				</ion-col>
				<ion-col class="rightcol">
					<button class="iconmore" ion-button clear icon-only small (click)="openMenuGroup()" round>
						<ion-icon name="more" ></ion-icon>
					</button>
				</ion-col>
			</ion-row>
		</ion-card-title>
		<p class="content">
			22 Bookings <br>
			Since December 23th 2016
		</p>
	</ion-card-content>

</ion-card>
.
.
.

groups.ts

.
.
.
openMenuGroup() {
	let actionSheet = this.actionsheetCtrl.create({
		title: 'More',
		cssClass: 'action-sheets-groups-page',
		buttons: [
			{
				text: 'Edit',
				icon: 'icon-edition',
				handler: () => {
					console.log('Edit clicked');
				}
			},
			{
				text: 'Delete',
				role: 'destructive',
				icon: 'icon-erase',
				handler: () => {
					console.log('Delete clicked');
				}
			},				
			{
				text: 'Cancel',
				role: 'cancel', // will always sort to be on the bottom
				icon: 'close',
				handler: () => {
					console.log('Cancel clicked');
				}
			}
		]
	});
	actionSheet.present();
}
.
.
.

groups.css

page-groups {

	ion-content{

		.settitle{
			font-size: 70%;
			color: grey;
		}

		button.iconmore{
			font-size: 80%;
			color: grey;
		}

		ion-col.rightcol{
			direction: rtl;
		}

		p.content{
			font-size: 90%;
			color: grey;
		}
	}

	.action-sheets-groups-page {


		.icon-edition {
			color: grey;
		}
		.icon-erase {
			color: grey;
		}
		.action-sheet-cancel ion-icon,
		.action-sheet-destructive {
			color: grey;
		}
	}

}

Thanks in advance!! I tried to follow the documentation but I couldn’t how to do that.

1 Like
2

Hi, did you try and add a cssClass option to your action sheet buttons? Then you should be able to control the looks of your buttons through css.

3

I tried this:

groups.ts:

let actionSheet = this.actionsheetCtrl.create({
	title: 'More',
	cssClass: 'action-sheets-groups-page',
	buttons: [
		{
			text: 'Edit',
			icon: 'icon-edition',
			cssClass: 'EditionIcon',
			handler: () => {
				console.log('Edit clicked');
			}
		},

groups.css:

	.action-sheets-groups-page {
		

		.EditionIcon {
			color: danger !important;
		}

		...
	}

But doesn’t work :worried:

4

You should do that in app.scss, because action-sheet is created outside your ionic-page :slight_smile:

2 Likes
5

I added this but still not working :confused:

6

I know this topic is old, but if anyone is facing this issue, here is the solution:

Apply your css class in app.scss, because as @luukschoen clarified, action sheet is a sibling of the current page.

   	{
   		text: 'Edit',
   		icon: 'icon-edition',
   		cssClass: 'EditionIcon',
   		handler: () => {
   			console.log('Edit clicked');
   		}
   	},

The code above will add class EditIcon to a button element that encapsulate a other element: span and ion-icon. So you must make a scss class like this:

.EditIcon {
   ion-icon{
       color: 'red';
   }
}

best regards,
Arthur

5 Likes
7

THANK YOU!!! As soon as I added to the app.scss it WORKES.

8

Thanks @asamarcos, it worked for me.

9 
.my-custom-class .action-sheet-button-inner.sc-ion-action-sheet-md{
    color: #ffffff  !important;
}

For my was .