如何改变自定义图标的颜色在一个动作表离子？

Question

我想要更改自定义图标(用IcoMoon生成)的颜色，这些图标嵌入在下面的操作表中。我正在使用Ionic框架版本: 3.1.1

​

​

以下是与视图相关的三个文件的外观：

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;
        }
    }

}

提前谢谢！！我试着跟踪文档，但我无法做到这一点。

Answer 1

键在global.scss中设置样式，因为此操作表是从页面外加载的。

Answer 2

尝试在app.scss中添加样式：

app.scss：

.ion-logo-whatsapp:before {
   color: green;
} 

Answer 3

尝试在ionic.css中更新这个类

.action-sheet-has-icons .icon {
color:/*whatever you want*/
}