<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon account-supervisor-circle-outline-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="M12.5 10C12.5 8.34 11.16 7 9.5 7C7.86 7 6.5 8.34 6.5 10C6.5 11.64 7.86 13 9.5 13C11.16 13 12.5 11.64 12.5 10M9.5 11C8.96 11 8.5 10.54 8.5 10C8.5 9.44 8.96 9 9.5 9C10.06 9 10.5 9.44 10.5 10C10.5 10.54 10.06 11 9.5 11M16 13C17.12 13 18 12.1 18 11C18 9.88 17.12 9 16 9C14.9 9 14 9.88 14 11C14 12.1 14.9 13 16 13M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2M5.85 17.11C6.53 16.57 8.12 16 9.5 16C9.58 16 9.66 16 9.74 16C10 15.37 10.41 14.72 11.04 14.15C10.5 14.05 9.95 14 9.5 14C8.21 14 6.12 14.44 4.78 15.42C4.28 14.38 4 13.22 4 12C4 7.58 7.59 4 12 4C16.41 4 20 7.58 20 12C20 13.19 19.73 14.33 19.25 15.36C18.25 14.77 16.89 14.5 16 14.5C14.5 14.5 11.5 15.3 11.5 17.19V19.97C9.24 19.84 7.22 18.76 5.85 17.11Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: "AccountSupervisorCircleOutlineIcon",
  emits: ['click'],
  props: {
    title: {
      type: String,
    },
    fillColor: {
      type: String,
      default: "currentColor"
    },
    size: {
      type: Number,
      default: 24
    }
  }
}
</script>