1. Display
  2. Icon

Display

Icon

This component is used to display a media icon from our collection.

Media Icons is a collection of icons we've designed at Vidstack to help with building audio and video player user interfaces. You can preview the entire collection in our media icons catalog.

Usage

The <media-icon> component will lazily load and display an icon based on the given type like so:

          
        
TIP

We strongly recommend installing our VSCode extension. It will provide you with autocomplete suggestions for all icon types and respective preview links.

Styling

Icons can be further customized with CSS like so:

css
        /* all icons */
media-icon {
  width: 32px;
  height: 32px;
  color: white;
}

/* specific icon */
media-icon[type='chromecast'] {
}

      

Previous <- Poster