MetaMask / MetaMask/metamask-mobile

Replace deprecated MaterialCommunityIcon component with Icon from the component-library

Open
#8,113 0 comments 0 reactions 0 assignees View on GitHub
good first issue INVALID-ISSUE-TEMPLATE team-design-system
Dominant language
TypeScript
Stars
3k
Forks
1.7k
Avg merge
1d 14h
Merged PRs (30d)
669

Description

### **Description**

There are many instances in the mobile codebase where the outdated `MaterialCommunityIcon` 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 `MaterialCommunityIcon` component. This makes it easier to review, test, and prevent regressions.

### **Technical Details**

- Replace one instance of `MaterialCommunityIcon` 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 `MaterialCommunityIcon` 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.

Contributor guide

Open the contributing guide

Research direction

Search the mobile codebase for a single `MaterialCommunityIcon` usage, then read the replacement API in `app/component-library/components/Icons/Icon/Icon.tsx`. Replace only that instance, preserve its behavior and appearance with the corresponding props, and run the Jest, e2e, lint, and Storybook checks; include the requested before/after screenshots in the PR.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Refactor
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.