oa/documentation/icon-box/icon-box-rounded-documentation.md

Rounded box

The Vuero <VIconBox /> component can have a rounded shape. You can make icons rounded by simply adding the rounded prop to the component. See the code example for more details.

<template>
  <VIconBox
    size="medium"
    color="primary"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="info"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="success"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="warning"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="danger"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="purple"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="yellow"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="orange"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="green"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="red"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="blue"
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
</template>