tdm-calculator icon indicating copy to clipboard operation
tdm-calculator copied to clipboard

Published 20 hours ago • verified publisher icon hackforla

Update Icons

Open marlenamellody opened this issue 1 year ago • 9 comments

Overview

We need to arrange our existing icons from Figma and locate replacements from Material UI.

Action Items

  • [x] Organize existing Figma icons
  • [x] Find suitable replacements from Material UI.
  • [ ] don't change anything in Figma, this issue is to determine replacements only
  • [ ] get sign-off from product.

Resources/Instructions

Material Figma

marlenamellody avatar May 02 '24 21:05 marlenamellody

size added on for this issue, @Parisajf please adjust "feature", " milestone", " priority" tags.

yiranshan avatar May 09 '24 03:05 yiranshan

Updated iconography with replacements from Material UI: Iconography (in progress)

  • The “save” icon in the current design system is not “filled” - I'm not sure where this icon is located on the site to compare, but based on the current design system standards, all icons should default to a filled version.
  • The sort icon on the "my projects" page is not in the design system and I've proposed a replacement from MUI.
  • The color of selected checkboxes does not match the design system's color palette.
  • Need to confirm which "download" icon to use.

Figma

marlenamellody avatar May 23 '24 04:05 marlenamellody

Progress: I've updated the iconography section for the style guide presentation slides. Blockers: Still waiting on feedback re: icon selections (download icon, sort icon, save icon)

Iconography1-slide Iconography2-slide

Figma

marlenamellody avatar May 28 '24 23:05 marlenamellody

dependency on dev confirmation, waiting for further instructions.

yiranshan avatar May 31 '24 01:05 yiranshan

  • Issue #1682 determined that there is no measurable impact to the bundle size by switching to any of the icon libraries mentioned here: https://react-icons.github.io/react-icons/, so this issue is ready to work on. I would recommend that you look at these available sets and pick one that you think will cover almost all our needs. We can always work with custom SVG icons for special cases, but sticking to a pre-designed library will be much less work.

entrotech avatar Jun 19 '24 05:06 entrotech

Icon replacements from https://react-icons.github.io/react-icons/icons/md/

marlenamellody avatar Jun 20 '24 04:06 marlenamellody

Add names of icons and link the icon name to the relevant material UI Page.

Example

image Search

Instructions for finding icons

  1. Go to https://mui.com/material-ui/material-icons/
  2. find icon
  3. click on icon
  4. copy URL

Parisajf avatar Jun 20 '24 21:06 Parisajf

Replacement Icons from Material UI with links to relevant pages. Figma

Status Icons Navigation Icons View Icons Action Icons

marlenamellody avatar Jun 21 '24 20:06 marlenamellody

This issue is in the prioritized backlog and still assigned to someone. Why? what needs to be done next.

ExperimentsInHonesty avatar Sep 06 '24 22:09 ExperimentsInHonesty

All the icons from FontAwesome have been replaced by Material UI icons, except for FileCSV icon for which no suitable replacement was found. The final icons have been approved by dev and stakeholders.

Link to the latest icons on style guide presentation

NilakshiS avatar Sep 11 '24 20:09 NilakshiS