Skip to content

Icon

Easily display Material Symbols icons

Usage

snowboarding
vue
<script setup>
    import { Icon } from '@8ctavio/vergil/components'
</script>

<template>
    <Icon code="snowboarding"/>
</template>

TIP

Vergil uses Material Symbols. In order for icons to display properly, it is required to import Material Symbols to the project's main css file as follows

css
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@1");

Props

Code
code: string = ''

Material Symbols icon code.

vue
<Icon :code="iconCode"/>

API Reference

Props

proptypedefault
codestring

Anatomy

<span.icon/>