Icon
Usage
variant
When choosing a variant, make sure to load the target font. You can load all three or just one.
sharp
<head>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
rel="stylesheet"
/>
</head>
rounded
<head>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
rel="stylesheet"
/>
</head>
Variant Example
import Icon from '@mavvy/m3-ui/Icon';
...
<Icon>emoji_food_beverage</Icon>
<Icon variant="rounded">emoji_food_beverage</Icon>
<Icon variant="sharp">emoji_food_beverage</Icon>
outlined
rounded
sharp
size
Size varies on size and fontVariant props
<Icon size="large" fontVariant="body">light_mode</Icon>
<Icon size="large" fontVariant="title">light_mode</Icon>
<Icon size="large" fontVariant="display">light_mode</Icon>
color
<Icon color="primary">home</Icon>
<Icon color="error">home</Icon>
filled
<Icon size="medium" fontVariant="display" color="primary" filled>home</Icon>
<Icon size="medium" fontVariant="display" color="error" filled>home</Icon>
Props
| prop | type | description |
|---|---|---|
| children | string | icon name of the google material icon |
| variant | outlined|rounded|sharp | variant of the icon |
| color | Color | icon color |
| size | Size | size of the icon component |
| filled | boolean | if true, will be displayed as a filled icon |
| fontVariant | TextVariant | variant to apply |