feat: CSS Variable for setting icon color on ion-back-button

[torgnywalin]

Feature Request

Ionic version:

[x] 4.x / 5.x

Describe the Feature Request

A CSS variable for setting the color of the icon in ion-back-button element. Suggestion: --icon-color

Describe Preferred Solution

New CSS variable for setting icon color: --icon-color

Describe Alternatives

Related Code

Additional Context

[liamdebeasi]

Thanks for the issue. You can control the color of the icon with the --color CSS Variable. Does this work for your use case?

[torgnywalin]

That changes both the text and icon, I want to be able to have separate color on icon and text. I would suggest to use --color variable if --icon-color is not available.

[jernesto91]

can be done using ::part

ion-back-button::part(icon) { 
    color: #ea0000!important;
}

[liamdebeasi]

Thanks for the issue. We added the icon Shadow Part to ion-back-button which allows you to customize the color of the button:

ion-back-button::part(icon) {
  color: red;
}

See https://ionicframework.com/docs/api/back-button#css-shadow-parts for more information.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.