ActionList styles set an svg style, which overwrites child Icon styles

[pt8o]

Summary

In the screenshot above, the "Disconnect" icon corresponds to this entry in the items array passed to ActionList:

{
   content: "Disconnect",
   onAction: () => {},
   prefix: <Icon source={DeleteIcon} tone="critical" />,
},

So the icon should be critical (red). But you can see in the styles that its fill colour is determined by the .Polaris-ActionList__Prefix svg rule, which forces the fill to be the default icon colour.

Steps to reproduce

Using an <ActionList />, make one of the list items use an <Icon /> with a tone other than default as its prefix.

Are you using React components?

Yes

Polaris version number

12.22.1

Browser

Chrome

Device

MacOS