import { Meta, Source } from '@storybook/addon-docs/blocks';
# Icon Migration
This migration guide is just an overview. For more in depth component information, visit:
- [Availity Design Documentation](https://design.availity.com/2e36e50c7/p/77f9e0-components/b/7234bb)
- [MUI Documentation](https://mui.com/material-ui/icons/#svgicon)
## Key Differences (not exhaustive list)
### Props
#### ⚠️ Changed
- Icons are now aria-hidden by default.
- `arialabel` -> `titleAccess` SVGs use titles instead of aria-labels, with no default title provided.
If `Icon` is no longer aria-hidden a title must be assigned.
- `size` -> `fontSize` The old sizes start at undefined and go up from `lg` to `5x`,
while the new `fontSize` goes from `xxsmall` to `xlarge`. The equivalent sizes in `element` are two sizes smaller than `availity-react`
- `undefined` -> `xxsmall`
- `lg` -> `small`
- `3x` -> `xlarge`
#### 🚫 Removed
- `name` previously determined the icon used, now every icon is a separate component. `` -> ``
## Code Examples
`reactstrap`/`availity-react` Example:
(
);
`}
/>
`@availity/element` Example:
(
);
`}
/>
## Icon Equivalents
There is a consolidation effort for icons so not all uikit icons have been migrated over. Any remaining icons can be added on an individual basis as the need arises.
| uikit/availity-react | element |
| -------------------- | -------------------- |
| angle-double-down | NavigateBottom |
| angle-double-left | NavigateFirst |
| angle-double-right | NavigateLast |
| angle-double-up | NavigateTop |
| angle-down | Expand |
| angle-left | NavigatePrevious |
| angle-right | NavigateNext |
| angle-up | Collapse |
| arrows-cw | ArrowsRotate |
| asterisk | Asterisk |
| attach | Attachment |
| attention | WarningTriangle |
| attention-circle | WarningCircle |
| basket | CartShopping |
| beaker | Flask |
| bell | BellEmpty |
| bell-alt | Bell |
| bell-off | BellSlash |
| bell-off-empty | BellSlashEmpty |
| building | Building |
| box | Box |
| calendar | CalendarDays |
| cancel | Close |
| cancel-circle | CancelCircle |
| cc-amex | CreditCardAmex |
| cc-discover | CreditCardDiscover |
| cc-mastercard | CreditCardMastercard |
| cc-paypal | CreditCardPaypal |
| cc-stripe | CreditCardStripe |
| cc-visa | CreditCardVisa |
| chart-area | ChartArea |
| chart-bar | ChartColumn |
| chart-line | ChartLine |
| chart-pie | ChartPie |
| chat | Comments |
| check | SquareCheck |
| check-empty | SquareEmpty |
| circle-thin | CircleEmpty |
| clipboard | Clipboard |
| clock | Clock |
| cog | Settings |
| comment | Message |
| comment-empty | MessageEmpty |
| copyright | Copyright |
| credentialing | FileCircleCheck |
| credit-card | CreditCard |
| desktop | Desktop |
| doc | FileEmpty |
| doc-alt | File |
| doc-text-inv | FileLines |
| dot-circled | CircleDot |
| down-dir | TriangleExpand |
| down-small | ArrowDown |
| download-cloud | Download |
| edit | Edit |
| ellipsis | MoreHorizontal |
| ellipsis-vert | MoreVertical |
| export | Export |
| eye | Eye |
| eye-off | EyeSlash |
| fax | Fax |
| file-archive | FileArchive |
| file-audio | FileAudio |
| file-code | FileCode |
| file-excel | FileExcel |
| file-image | FileImage |
| file-pdf | FilePdf |
| file-powerpoint | FilePowerpoint |
| file-video | FileVideo |
| file-word | FileWord |
| filter | Filter |
| folder-empty | FoldeEmpty |
| folder-open-empty | FolderOpenEmpty |
| frown | FaceFrown |
| h-sigh | SquareH |
| hand-holding-gear | Gears |
| heart | Heart |
| heart-empty | HeartEmpty |
| help-circle | HelpCircle |
| history | History |
| home | Home |
| hospital | Hospital |
| inbox | Inbox |
| info-circle | InfoCircle |
| key | Key |
| left-circled | ArrowCircleRight |
| left-dir | TriangleLeft |
| left-small | ArrowLeft |
| link | Link |
| link-ext | OpenInNew |
| location | Location |
| lock | Lock |
| mail-alt | Mail |
| meh | FaceNeutral |
| menu | Menu |
| minus | Minus |
| minus-circle | MinusCircle |
| money | Money |
| ok | Check |
| ok-circle | SuccessCircle |
| paste | Paste |
| pause | Pause |
| pencil | Pencil |
| phone | Phone |
| picture | Picture |
| pin | Thumbtack |
| play | Play |
| plus | Plus |
| plus-circle | PlusCircle |
| print | Print |
| right-circled | ArrowCircleLeft |
| right-dir | TriangleRight |
| right-small | ArrowRight |
| search | Search |
| share | Share |
| smile | FaceSmile |
| sort | Sort |
| sort-alt-down | SortAltDown |
| sort-alt-up | SortAltUp |
| sort-down | SortDown |
| sort-up | SortUp |
| star | Star |
| star-empty | StarEmpty |
| star-half | StarHalf |
| star-half-alt | StarHalfStroke |
| tag | Tag |
| tags | Tags |
| th | TableCells |
| th-large | TableCellsLarge |
| th-list | List |
| thumbs-down-alt | ThumbDown |
| thumbs-up-alt | ThumbUp |
| trash-empty | Delete |
| unlink | LinkSlash |
| up-dir | TriangleCollapse |
| up-small | ArrowUp |
| upload-cloud | Upload |
| user | User |
| user-md | UserDoctor |
| user-plus | UserPlus |
| users | Users |