<template>
    <span v-bind="$attrs"
          :aria-hidden="title ? null : true"
          :aria-label="title"
          class="material-design-icon checkbox-marked-circle-icon"
          role="img"
          @click="$emit('click', $event)">
      <svg :fill="fillColor"
           class="material-design-icon__svg"
           :width="size"
           :height="size"
           viewBox="0 0 24 24">
        <path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z">
          <title v-if="title">{{ title }}</title>
        </path>
      </svg>
    </span>
  </template>
  
  <script>
  export default {
    name: "CheckboxMarkedCircleIcon",
    emits: ['click'],
    props: {
      title: {
        type: String,
      },
      fillColor: {
        type: String,
        default: "currentColor"
      },
      size: {
        type: Number,
        default: 24
      }
    }
  }
  </script>