Hi
I want to change the color of the svg inside the Shadow-DOM of ion-icon which is in IonActionSheet.
I’m able to do this using TypeScript like this when ionActionSheetDidPresent has been fired:
document.querySelector('.deteleActionButton>span>ion-icon')?.shadowRoot?.querySelector('div>svg').?.setAttribute('style', 'color: #cf3c4f !important;');
deleteActionButton is class of the desired button (it has been set by cssClass option.
But the problem is → Event will be fired after displaying action sheet and the icon will be in its previous color for a few moments. Other events like ionActionSheetWillPresent doesn’t solve the problem either because there is no existing element before presenting the action sheet to work on it using TypeScript.
The only way that comes to my mind is using CSS, But there is a problem here too 
:
You should style Shadow-DOM using css like this:
rootElementQuery::part(part_name) {
color: red;
}
And I don’t know the name of the shadow part for ion-icon which couldn’t be found in internet or Ionic docs.
Does anyone know the name of the Shadow-Part for ion-icon or any other solutions?
Thanks.