mirror of
https://github.com/directus/directus.git
synced 2026-01-30 16:58:36 -05:00
3354066983
Closes #5161 Squashed commit of the following: commit 8ef6770185cf4d3bcdcda0c41e98a6f3ef0c4e1f Merge:775ceaccc2ca5fdb86Author: rijkvanzanten <rijkvanzanten@me.com> Date: Fri Apr 23 10:42:54 2021 -0400 Merge branch 'main' into patch-1 commit775ceaccc4Author: rijkvanzanten <rijkvanzanten@me.com> Date: Fri Apr 23 10:41:59 2021 -0400 Cleanup union type docs commit1000988c32Author: neo7-studio-web <18073828+neo7-studio-web@users.noreply.github.com> Date: Tue Apr 20 15:01:02 2021 +0200 Add a M2M GraphQL query example
71 lines
2.2 KiB
Markdown
71 lines
2.2 KiB
Markdown
# Icon
|
|
|
|
The icon component allows you to render any [Material Design Icons](https://material.io/icons). It also supports
|
|
rendering of custom SVG based icons.
|
|
|
|
## Sizes / Colors
|
|
|
|
The icon component supports multiple sizes and colors. The color prop accepts any valid CSS color. Color changes are
|
|
done via the css variable `--v-icon-color` like in the example below.
|
|
|
|
```html
|
|
<v-icon name="add" />
|
|
<style>
|
|
.v-icon {
|
|
--v-icon-color: var(--green-500);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Custom Size
|
|
|
|
If the default sizes don't give you the exact size you require, you can add the `size` prop with any custom pixel value.
|
|
Note: we recommend using one of the pre-defined sizes to ensure a consistent look across the platform.
|
|
|
|
## Outline
|
|
|
|
You can render the outline variant of the Material Icon by setting the `outline` property.
|
|
|
|
## Click events
|
|
|
|
When you add a click event to the icon, the icon will automatically add a pointer cursor.
|
|
|
|
## Left / Right
|
|
|
|
Oftentimes, you'll use the icon next to some text, for example in a button. When doing this, you can use the `left` /
|
|
`right` props to add some spacing to the icon:
|
|
|
|
```html
|
|
<v-button>
|
|
<v-icon name="add" left />
|
|
Add new
|
|
</v-button>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------- | ------------------------------------ | ------- | --------- |
|
|
| `name`\* | Which icon to display | | `String` |
|
|
| `filled` | Removes the outline style if enabled | `false` | `Boolean` |
|
|
| `sup` | | `false` | `Boolean` |
|
|
| `left` | Displays the icon more to the left | `false` | `Boolean` |
|
|
| `right` | Displays the icon more to the right | `false` | `Boolean` |
|
|
| `disabled` | Disables the icon | `false` | `Boolean` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ---------------------- | -------------- |
|
|
| `--v-icon-color` | `currentColor` |
|
|
| `--v-icon-color-hover` | `currentColor` |
|
|
| `--v-icon-size` | `24px` |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| ------- | ------------------------------- | ----- |
|
|
| `click` | Fires when clicking on the icon | |
|