`icon` property is mandatory. It tells component what icon to render. If the property value is invalid, the component will render an empty icon. The value can be a string containing the icon name (icon must be registered before use by calling `addIcon`, see instructions above) or an object containing the icon data.
The icon component has the following optional properties:
-`inline`. Changes icon behaviour to match icon fonts. See "Icon and InlineIcon" section above.
-`width` and `height`. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.
-`color`. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.
-`rotate`. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.
-`align`, `vAlign`, `hAlign`, `slice`. Icon alignment. See "Alignment" section below.
### Other properties and events
In addition to the properties mentioned above, the icon component accepts any other properties and events. All other properties and events will be passed to generated `SVG` element, so you can do stuff like assigning `onClick` event, setting the inline style, add title and so on.
By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio. This makes it easy to change icon size by changing `[attr]font-size` in the stylesheet, just like icon fonts.
- Setting `font-size` in style (or `fontSize` if you are using inline style).
- Setting `width` and/or `height` property.
Values for `width` and `height` can be numbers or strings.
If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
#### Dimensions as numbers
You can use numbers for `width` and `height`.
```jsx
<Iconicon="mdi:home"height={24}/>
```
```jsx
<Iconicon="mdi:home"width={16}height={16}/>
```
Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
#### Dimensions as strings without units
If you use strings without units, they are treated the same as numbers in an example above.
```jsx
<Iconicon="mdi:home"height="24"/>
```
```jsx
<Iconicon="mdi:home"width="16"height={'16'}/>
```
#### Dimensions as strings with units
You can use units in width and height values:
```jsx
<Iconicon="mdi:home"height="2em"/>
```
Be careful when using `calc`, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
#### Dimensions as 'auto'
Keyword "auto" sets dimensions to the icon's `viewBox` dimensions. For example, for 24 x 24 icon using `height="auto"` sets height to 24 pixels.
```jsx
<Iconicon="mdi:home"height="auto"/>
```
### Icon colour
There are two types of icons: icons that do not have a palette and icons that do have a palette.
Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
- Set `color` style or use stylesheet to target icon. If you are using the stylesheet, target `svg` element.
This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation properties exist? Because it is a different type of transformation.
- CSS transformations transform the entire icon.
- Icon transformations transform the contents of the icon.
If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
Rotating 16x24 icon by 90 degrees results in:
- CSS transformation keeps 16x24 bounding box, which might cause the icon to overlap text around it.
- Icon transformation changes bounding box to 24x16, rotating content inside an icon.
_TODO: show visual example_
#### Flipping an icon
There are several properties available to flip an icon:
An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
To rotate an icon, use `rotate` property. Value can be a string (degrees or percentages) or a number.
Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
Examples of 90 degrees rotation:
```jsx
<Iconicon="mdi-light:alert"rotate={1}/>
<Iconicon="mdi-light:alert"rotate="90deg"/>
<Iconicon="mdi-light:alert"rotate="25%"/>
```
### Alignment
Alignment matters only if you set the icon's width and height properties that do not match the viewBox with and height.
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both `width` and `height` properties for this to happen or use stylesheet to set both icon's width and height.
#### Stretching SVG
When you use incorrect width/height ratio for other images, browser stretches those images.
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
#### Alignment properties
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment properties:
-`hAlign`: string property to set horizontal alignment. Possible values are "left", "center" and "right".
-`vAlign`: string property to set vertical alignment. Possible values are "top", "middle" and "bottom".
-`slice`: boolean property. See below.
-`align`: shorthand string property. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as `slice={false}`) and "slice" (same as `slice={true}`) separated by comma.
Example of aligning an icon to the left if icon is not square:
There are over 50 icon sets. This readme shows only a few examples. See [Iconify icon sets](http://iconify.design/icon-sets/) for a full list of available icon sets. Click any icon to see code.
