Skip to main content
Version: 5.x


This component was inspired by Shoelace.

Loads and renders an SVG icon. The icon be loaded from an icon library or from an absolute URL via the src property. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a custom icon library.


<!-- Change the icons property to the name of the library you'd like to use. -->
<vm-player icons="material">
<!-- ... -->
<!-- Register a custom icon library. -->
<vm-icon-library name="my-library"></vm-icon-library>
const library = document.querySelector('vm-icon-library[name="my-library"]');
library.resolver = iconName => `/icons/${iconName}.svg`;


nameThe name of the icon library to register. Vime provides some default libraries out of the box such as vimeor material.string ∣ undefinedundefined
resolverA function that translates an icon name to a URL where the corresponding SVG file exists. The URL can be local or a CORS-enabled endpoint.((name: string) => string) ∣ undefinedundefined