Replace deprecated MaterialIcon component with Icon from the component-library

### **Description**

There are many instances in the mobile codebase where the outdated `MaterialIcon` component is still in use. These should be replaced with the new `Icon` component (`app/component-library/components/Icons/Icon/Icon.tsx`).

To support a smooth migration process across multiple contributors and maintain manageable PR sizes, **each pull request (PR) should focus on replacing a single instance** of the `MaterialIcon` component. This makes it easier to review, test, and prevent regressions.

### **Technical Details**

- Replace one instance of `MaterialIcon` with the new `Icon` component.
- Ensure all relevant props are updated to match the new API.
- Component APIs differ slightly—carefully review each usage to preserve behavior and appearance.
- Verify the replacement introduces no functional or visual regressions.

### **Acceptance Criteria**

- Only a single instance of `MaterialIcon` is replaced in each PR.
- New `Icon` component is correctly integrated with proper props and logic.
- No visual or functional regressions are introduced.
- All Jest tests, e2e tests, linting, and Storybook must pass.
- PR descriptions must follow the provided template and include before/after UI screenshots.

PRs that do not meet these criteria may be closed or requested for revision.

### **Difficulty**: Intermediate

**Good first issue for:** External contributors who can run the mobile app locally and have experience with React Native, component APIs, and maintaining consistent UI and test coverage.

Start by locating a single MaterialIcon usage in the mobile codebase and read app/component-library/components/Icons/Icon/Icon.tsx to compare the component APIs. Replace only that instance, preserving its behavior and appearance, then run the relevant Jest, e2e, lint, and Storybook checks and record before/after screenshots.

Written by the indexing model from the issue text.