Stepper component tick icon not render properly in RTL direction

[vsarangan]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hi Team,

In the Stepper component (horizontal stepper ) tick icon does not render properly in the RTL direction.
it is not working in the angular material sample also

https://material.angular.io/components/stepper/examples

I tried the tricky solution
[editable]="isEditable"
toggle the isEditable value if the user change to RTL language, it is worked as expected.

Is there any alternative solution for this issue?

Reproduction

Steps to reproduce:

1. Open the angular material stepper component in stackblitz
2. Fill the first step and move to the next step
3. Apply the RTL direction in the HTML element
4. we can the tick icon in the first step is misalignment

Expected Behavior

it's should be alignment proper both RTL and LTR

Actual Behavior

Issue in Stepper component

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}