## Background goalPer {T260617} we need to support various pre-defined sizes in the Icon component. Right now there are 3 possible sizes of icon: "x-small" (12px), "small" (16px) and "medium" (20px). Icon size applies to both `width` and `height`, and there are corresponding `min-height` and `min-width` tokens as well. Finally, the sizes should also be applied in the SVG markup itself (viewbox dimensions, etc).
In T316895 Link MVP component was created. The initial version of that component supports styling for the external link icon at 12px size. In the future we may also need to support an initial icon at 20px size. (We will also need to add the new external link icon in Codex at some point: T322014)
## Development considerations
For the Vue-based Icon component, we may need to introduce a "size" property that supports both 12px and 20px sizes (as well as others potentially).==== Use Cases
For a future CSS-only I* Chips component needs a `small` icon component (task TBD)(currently this is achieved via CSS overrides, we may need to support the use of modifier classesbut it would be better to achieve the same results.
==== Design specificationjust pass props to Icon)
| [[ https://www.figma.com/file/ZKM3aDh9mqnpioOeSG3arg/Link-component---T309248?node-id=543%3A14707&viewport=1374%2C1302%2C0.73 | Codex Figma spec sheet ]] |* Link component (which is currently handled as a LESS mixin) should use a smaller icon size when an external link icon is included with the text
* Others?
==== Acceptance criteria (or Done)
[] Add size properties to the Icon component:
[] Start icon (20px size) `x-small`, `small`, and `medium` (12, 16, and 20px respectively). `medium` is the default and will be used if no other size prop is provided.
[] External link icon at the end (12px size)
## Use cases[] Ensure that CSS-only Icon component can also handle these pre-defined sizes via modifier classes and/or LESS mixin parameters (@AnneT I'll defer to you here)
What immediate use-cases exist for this?