[HOLD for payment 2022-03-02] Change Security -> Change password page icon to `Key`

[Beamanator]

The current "Lock" icon on the on the "Change password" page link is the same as the "Lock" icon on the main "Security" page link. We plan to update the "Change password" page link to be the "Key" icon - part of the N7 Account Settings doc update.

@Expensify/design team can you please provide an svg icon for the Key that we'll use on that page? You should be able to see the Key icon we need in figma here:

[MelvinBot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[shawnborton]

Here ya go: key.svg.zip

[PrashantMangukiya]

Proposed Solution: (If considered as external)

We have to put key.svg within assets/images folder and export variable from src/components/Icon/Expensicons.js as shown under:

import Key from '../../../assets/images/key.svg';

export {
  ...,
  Key,
  ...,
}

Thereafter within src/pages/settings/Security/SecuritySettingsPage.js file we have to change icon to Expensicons.Key as shown under:

const menuItems = [
    {
        translationKey: 'passwordPage.changePassword',
        icon: Expensicons.Key,             // *** Updated code ***
        action: () => {
            Navigation.navigate(ROUTES.SETTINGS_PASSWORD);
        },
    },
    ...,
];

Here is Screenshot how it looks after updates:

[MelvinBot]

Triggered auto assignment to @SofiedeVreese (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[Beamanator]

Thanks for the quick response @shawnborton 👍 I forgot to mark this external immediately 😅