<script lang="ts" setup>
import MDIcon from '../MDIcon.vue'
</script>

<template>
  <div class="_row">
    <div>default</div>
    <div>outlined</div>
    <div>sharp</div>
    <div>round</div>
    <div>two-tone</div>
  </div>
  <div class="_row">
    <MDIcon name="face" />
    <MDIcon name="face" type="outlined" />
    <MDIcon name="face" type="sharp" />
    <MDIcon name="face" type="round" />
    <MDIcon name="face" type="two-tone" />
  </div>
  <div class="_row">
    <MDIcon name="bookmarks" />
    <MDIcon name="bookmarks" type="outlined" />
    <MDIcon name="bookmarks" type="sharp" />
    <MDIcon name="bookmarks" type="round" />
    <MDIcon name="bookmarks" type="two-tone" />
  </div>
</template>

<style scoped>
._row {
  display: flex;
  margin-bottom: 0.5rem;
}
._row > * {
  width: 80px;
  text-align: center;
}
</style>
