import { Meta } from "@storybook/blocks";
# Font Awesome → Material Design Icons Guide
This guide provides necessary information for transitioning from Font Awesome to Material Design Icons in comply-ui.
## Using the component
Replace `Icon` with `MaterialIcon` in your code.
Before:
```jsx
import { Icon, ICON_TYPE } from "@conveyorhq/arrow-ds";
return ;
```
After:
```jsx
import { MaterialIcon } from "@conveyorhq/arrow-ds";
return ;
```
### Defining the icon name
Define the icon name using the `name` prop in `MaterialIcon` vs. the `icon` prop in `Icon`.
`ICON_TYPE` and `CUSTOM_ICON_TYPE` enums have been removed; the `MaterialIcon` name is still typed via the `MaterialIconName` type, but not as an enum to avoid an additional import. Use `type MaterialIconName` for type checking in comply-ui.
### Icon weight
Icon weight is a concept specific to Material Design icons. Define the weight using the `weight` prop in `MaterialIcon`. Available weights are `400` (default) and `600`.
Weights are typed using `type MaterialIconWeight`.
Don't use the enums `ICON_STYLE_PREFIX.REGULAR` or `ICON_STYLE_PREFIX.SOLID`; these are being deprecated with Font Awesome.
```jsx
```
### Icon size
Set the icon size using the `size` prop, which defaults to `md` (16px). Available sizes are `sm` (12px), `md` (16px), `lg` (20px), and `xl` (24px).
Sizes are typed using `type MaterialIconSize`.
```jsx
```
### Additional props
The follwing props for `Icon` no longer apply to `MaterialIcon`.
| Prop type | Alternative |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `color?: string;` | Use `className` or `style` to set the icon's color |
| `spin?: boolean;` | Use the `animate-spin` classname, which adds a spinning animation to the icon |
| `prefix?: ICON_STYLE_PREFIX;` | None; `prefix` was specific to Font Awesome |
| `flip?: FlipProp;` | This prop was specific to Font Awesome and was never used; if necessary, use the CSS `transform` property with functions `scaleX(-1)` for horizontal or `scaleY(-1)` for vertical. |
## Font Awesome icon mapping
Most of the icons have a different name in Material Design. The table below shows the mapping of Font Awesome icons to Material Design icons.
| Font Awesome | Google Material Design | Notes |
| -------------------------- | ------------------------------ | ----------------------- |
| `archive` | `inventory` | |
| `arrow-down` | `arrow-downward` | |
| `arrow-left` | `arrow-backward` | |
| `arrow-right` | `arrow-forward` | |
| `arrow-up` | `arrow-upward` | |
| `arrows-alt` | `drag-pan` | or `open-with` |
| `backward` | `fast-rewind` | |
| `balance-scale` | `balance` | |
| `ban` | `block` | |
| `band-aid` | `healing` | |
| `bars` | `menu` | |
| `battery-half` | `battery-horiz-050` | |
| `bed` | `hotel` | |
| `bell` | `notifications` | |
| `bell-slash` | `notifications-off` | |
| `biohazard` | suitable replacement not found | |
| `birthday-cake` | `cake` | |
| `bold` | `format-bold` | |
| `bolt` | `bolt` | or `flash-on` |
| `book` | `book-2` | |
| `box` | `package-2` | |
| `broom` | `mop` | |
| `bug` | `pest-control` | or `bug` |
| `bullhorn` | `campaign` | |
| `bullseye` | `target` | |
| `calendar` | `calendar-today` | |
| `calculator` | `calculate` | |
| `camera` | `photo-camera` | |
| `caret-down` | `arrow-drop-down` | |
| `caret-left` | `arrow-left` | |
| `caret-right` | `arrow-right` | |
| `caret-up` | `arrow-drop-up` | |
| `chart-bar` | `insert-chart` | |
| `chart-line` | `chart-data` | |
| `check` | `check` | |
| `check-circle` | `check-circle` | |
| `check-square` | `check-box` | |
| `chevron-down` | `keyboard-arrow-down` | |
| `chevron-left` | `keyboard-arrow-left` | |
| `chevron-right` | `-arrow-right` | |
| `chevron-up` | `keyboard-arrow-up` | |
| `circle` | `circle` | |
| `circle-notch` | `progress-activity` | |
| `clock` | `schedule` | |
| `clone` | suitable replacement not found | |
| `clipboard` | `content-paste` | |
| `clipboard-check` | `inventory` | |
| `cloud-download-alt` | `cloud-download` | |
| `cloud-upload-alt` | `cloud-upload` | |
| `code-branch` | `graph-8` | |
| `cog` | `settings` | |
| `coins` | suitable replacement not found | |
| `columns` | `view-column-2` | |
| `comment-alt` | `chat-bubble` | |
| `compass` | `explore` | |
| `compress` | `fullscreen-exit` | |
| `compress-arrows-alt` | `recenter` | or `zoom-in-map` |
| `crosshairs` | `my-location` | |
| `crown` | `crown` | |
| `copy` | `content-copy` | |
| `door-closed` | `door-front` | |
| `door-open` | `door-open` | |
| `download` | `download` | |
| `dungeon` | suitable replacement not found | |
| `edit` | `edit-square` | |
| `ellipsis-h` | `more-horiz` | |
| `ellipsis-v` | `more-vert` | |
| `envelope` | `mail` | |
| `envelope-open-text` | `inbox-text` | |
| `eraser` | `ink-eraser` | |
| `exchange-alt` | `sync-alt` | |
| `exclamation` | `exclamation` | |
| `exclamation-circle` | `error` | |
| `exclamation-triangle` | `warning` | |
| `expand` | `fullscreen` | |
| `expand-arrows-alt` | suitable replacement not found | |
| `external-link-alt` | `open-in-new` | |
| `external-link-square-alt` | suitable replacement not found | |
| `eye` | `visibility` | |
| `eye-slash` | `visibility-off` | |
| `fast-backward` | `skip-previous` | is this the best match? |
| `fast-forward` | `skip-next` | is this the best match? |
| `feather-alt` | suitable replacement not found | |
| `file` | `draft` | |
| `file-alt` | `description` | or `docs` |
| `file-export` | `file-export` | |
| `file-import` | `upload-file` | |
| `file-signature` | suitable replacement not found | |
| `fill-drip` | `colors` | |
| `filter` | `filter-alt` | |
| `flag` | `flag` | |
| `flask` | `experiment` | |
| `folder` | `folder` | |
| `folder-open` | `folder-open` | |
| `forward` | `fast-forward` | |
| `gavel` | `gavel` | |
| `gift` | `redeem` | |
| `globe-americas` | `globe` | |
| `globe-europe` | `globe-uk` | |
| `grip-lines` | `drag-handle` | |
| `grip-lines-vertical` | suitable replacement not found | |
| `hand-holding-heart` | `volunteer-activism` | |
| `handshake` | `handshake` | |
| `hashtag` | `tag` | |
| `heart-broken` | `heart-broken` | |
| `highlighter` | `ink-highlighter` | |
| `history` | `history` | |
| `id-badge` | `badge` | |
| `image` | `image` | |
| `info-circle` | `info` | |
| `italic` | `format-italic` | |
| `key` | `key` | |
| `keyboard` | `keyboard` | |
| `laptop` | `laptop-mac` | |
| `layer-group` | `stacks` | |
| `level-up-alt` | suitable replacement not found | |
| `life-ring` | `support` | |
| `link` | `link` | |
| `list-ol` | suitable replacement not found | |
| `list-ul` | `list` | |
| `lock` | `lock` | |
| `long-arrow-alt-right` | `arrow-right-alt` | |
| `magic` | `wand-shine` | |
| `map-marker-alt` | `location-on` | |
| `map-signs` | `signpost` | |
| `meteor` | suitable replacement not found | |
| `minus` | `remove` | |
| `minus-circle` | `do-not-disturb-on` | |
| `mouse-pointer` | `left-click` | is this the best match? |
| `palette` | `palette` | |
| `paper-plane` | `send` | |
| `paperclip` | `attach-file` | or `attachment` |
| `paste` | `content-paste-go` | is this the best match? |
| `pause` | `pause` | |
| `pen` | `edit` | |
| `pencil-ruler` | `design-services` | |
| `play` | `play-arrow` | |
| `plus` | `add` | |
| `plus-circle` | `add-circle` | |
| `poo-storm` | no replacement needed | to be deleted |
| `question` | `question-mark` | |
| `question-circle` | `help` | |
| `random` | `shuffle` | |
| `redo` | `redo` | |
| `reply` | `reply` | |
| `robot` | `robot` | or `smart-toy` |
| `rocket` | `rocket-launch` | |
| `ruler` | `straighten` | |
| `save` | `save` | |
| `scroll` | suitable replacement not found | |
| `search` | `search` | |
| `search-plus` | `zoom-in` | |
| `seedling` | `psychiatry` | is this the best match? |
| `server` | `storage` | |
| `share` | `share-windows` | is this the best match? |
| `share-alt` | `share` | |
| `shield-alt` | `shield` | |
| `shield-check` | suitable replacement not found | |
| `sign-out-alt` | `logout` | |
| `signal` | `android-cell-5-bar` | |
| `signature` | `signature` | |
| `sitemap` | suitable replacement not found | |
| `skull` | `skull` | |
| `sliders-h` | `tune` | |
| `sort` | suitable replacement not found | |
| `sort-down` | `arrow-drop-down` | is this the best match? |
| `sort-up` | `arrow-drop-up` | is this the best match? |
| `spinner` | suitable replacement not found | |
| `square` | `square` | |
| `stamp` | `approval` | |
| `star` | `star` | |
| `stopwatch` | `timer` | |
| `suitcase-rolling` | `luggage` | |
| `sync` | `sync` | |
| `table` | `table` | |
| `tag` | `sell` | |
| `tasks` | `checklist` | |
| `ticket-alt` | `confirmation-number` | |
| `times` | `close` | |
| `times-circle` | `cancel` | |
| `th-large` | `grid-view` | |
| `thumbs-down` | `thumb-down` | |
| `thumbs-up` | `thumb-up` | |
| `tools` | `construction` | or `handyman` |
| `trash` | `delete` | |
| `undo` | `undo` | |
| `universal-access` | `accessibility-new` | |
| `unlink` | `link-off` | |
| `unlock` | `lock-open` | |
| `user` | `person` | |
| `user-astronaut` | … | to be deleted |
| `user-clock` | suitable replacement not found | |
| `user-lock` | `lock-person` | is this the best match? |
| `user-plus` | `person-add` | |
| `users` | `groups` | |
| `user-friends` | `group` | |
| `user-secret` | suitable replacement not found | |
| `user-shield` | `person-shield` | |
| `vial` | `labs` | |
| `video` | `videocam` | |
| `wrench` | `build` | |
| `plug` | `power` | |
| `money-bill` | suitable replacement not found | |
| `money-bill-wave` | suitable replacement not found | |
| `money-check-alt` | suitable replacement not found | |
| `cloud-showers-heavy` | `rainy` | |
| `award` | `trophy` | is this the best match? |
## Custom icon mapping
Custom icons have the following replacements in Material Design.
| Font Awesome | Google Material Design | Notes |
| ------------------- | ------------------------------ | -------------------------------------------------------- |
| `arrow-to-bottom` | suitable replacement not found | |
| `arrow-to-left` | suitable replacement not found | |
| `arrow-to-right` | suitable replacement not found | |
| `automation` | `automation` | |
| `badge-check` | `verified` | |
| `comment-alt-check` | `mark-chat-read` | is this the best match? could be same as `dialog-check`? |
| `dialog-check` | `mark-chat-read` | is this the best match? |
| `do-not-enter` | `do-not-disturb-on` | |
| `fact-check` | `fact-check` | |
| `folders` | `folder-copy` | is this the best match? |
| `globe` | `language` | |
| `insert-end` | `align-end` | is this the best match? |
| `insert-middle` | `align-center` | is this the best match? |
| `insert-start` | `align-start` | is this the best match? |
| `library-add` | `shadow-add` | is this the best match? |
| `query-stats` | `query-stats` | |
| `scroll` | suitable replacement not found | |
| `shield-check` | suitable replacement not found | |
| `sparkle` | no replacement needed | need to make custom |
| `triangle-down` | suitable replacement not found | |
| `triangle-up` | suitable replacement not found | |