<script lang="ts" setup>
import { PropType } from 'vue'
import { MDIconTypes } from '../../types'

defineProps({
  name: { type: String as PropType<MDIconTypes>, required: true },
  type: {
    type: String as PropType<'' | 'outlined' | 'sharp' | 'round' | 'two-tone'>,
    default: ''
  }
})
</script>

<template>
  <div :class="`md-icon ${type ? `material-icons-${type}` : 'material-icons'}`">
    {{ name }}
  </div>
</template>

<style scoped>
.md-icon {
  user-select: none;
}
</style>
