<template>
  <span
    v-bind="$attrs"
    :aria-hidden="title ? null : true"
    :aria-label="title"
    class="material-design-icon account-tie-voice-off-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.7 9.5L7.5 4.3C7.96 4.11 8.46 4 9 4C11.2 4 13 5.79 13 8C13 8.53 12.89 9.04 12.7 9.5M16.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.63M20.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 15M2.39 1.73L1.11 3L5.13 7C5.05 7.34 5 7.66 5 8C5 10.21 6.79 12 9 12C9.33 12 9.66 11.94 9.97 11.86L13 14.87C12.93 16.06 12.54 18.32 10.8 20.83L10 16L10.93 14.12C10.31 14.05 9.66 14 9 14C8.32 14 7.67 14.05 7.05 14.12L8 16L7.18 20.83C5.27 18.07 5 15.6 5 14.54C2.6 15.24 .994 16.5 .994 18V22H17V18.88L20.84 22.73L22.11 21.46L2.39 1.73Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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