Icon

Component name: <v-icon>

UI-icons by name

Use the name attribute to display predefined UI icons from the design package:

Logo-icons by name

Use the name attribute to display predefined logo-icons from the design package:

Icons by source

If an icon is unavailable by name you can define a path in the src attribute to display a custom icon. Preferably define icons by the name attribute if possible.

Customization

Icon and text

Use v-icon to prepend text with an icon:

Icon sizes

Use the size attribute to display icons in different sizes

xxsmall xsmall small medium large

It's highly recommended to use the size attribute above but if you have a special case you can also use the width attribute to display icons in custom sizes:

E.g. width="200" or width="300"

Usage examples

Icon in a Card

API

Name	Type	Description	Default
name	String	Icon identifiers valid values: Find the section Icons by name above and select the [Table] tab	-
src	String	Icon url. Valid value: Image URL	-
size	String	Icon size valid values: Valid values: xxsmall xsmall small medium large	medium
light	Boolean	Will overwrite default icon color (Default icon-color is the icon's parent text-color)	false
dark	Boolean	Will overwrite default icon color (Default icon-color is the icon's parent text-color)	false
alt	String	Alternate text	-

General notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.