<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon account-tie-voice-off-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="M9.22 6L7.5 4.3C7.96 4.11 8.47 4 9 4C11.21 4 13 5.79 13 8C13 8.53 12.89 9.04 12.7 9.5L11 7.78C10.87 6.86 10.14 6.13 9.22 6M20.06 15C23.96 11.11 24 5.05 20.06 1L18.43 2.63C21.2 5.65 21.2 10.19 18.43 13.37L20.06 15M16.75 11.63C18.77 9.61 18.77 6.56 16.75 4.36L15.07 6.05C15.91 7.23 15.91 8.76 15.07 9.94L16.75 11.63M2.39 1.73L1.11 3L5.14 7.03C5.06 7.34 5 7.66 5 8C5 10.21 6.79 12 9 12C9.34 12 9.66 11.94 9.97 11.86L12.86 14.75L12.73 15L12.5 15.5C13.3 15.74 13.97 16.05 14.44 16.33L15.1 17V20.1H10.88L10 15.03L10.94 13.15C10.32 13.08 9.67 13.03 9 13.03S7.68 13.08 7.06 13.15L8 15.03L7.12 20.1H2.9V17C2.9 16.62 4 15.96 5.5 15.5L5.27 15L4.65 13.76C2.69 14.42 1 15.5 1 17V22H17V18.89L20.84 22.73L22.11 21.46L2.39 1.73Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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