<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon smoke-detector-variant-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="M22.11 21.46L2.39 1.73L1.11 3L4.06 5.95C2.77 7.63 2 9.72 2 12C2 17.5 6.5 22 12 22C14.28 22 16.37 21.23 18.05 19.94L20.84 22.73L22.11 21.46M12 20C7.59 20 4 16.41 4 12C4 10.28 4.56 8.69 5.5 7.38L6.93 8.82C6.35 9.75 6 10.83 6 12C6 13.3 6.42 14.5 7.11 15.47L7.83 14.75C7.31 13.96 7 13 7 12C7 11.11 7.25 10.28 7.66 9.55L8.4 10.3C8.15 10.81 8 11.39 8 12C8 12.74 8.22 13.43 8.57 14L9.3 13.29C9.11 12.89 9 12.46 9 12C9 11.67 9.07 11.36 9.18 11.07L12.93 14.82C12.64 14.93 12.33 15 12 15C11.54 15 11.11 14.89 10.72 14.7L10 15.43C10.58 15.79 11.26 16 12 16C12.61 16 13.19 15.85 13.71 15.6L14.45 16.34C13.72 16.75 12.89 17 12 17C11 17 10.04 16.69 9.25 16.17L8.53 16.89C9.5 17.59 10.7 18 12 18C13.17 18 14.25 17.65 15.18 17.07L16.62 18.5C15.32 19.44 13.72 20 12 20M12 8C12.74 8 13.43 8.22 14 8.57L13.29 9.3C12.96 9.15 12.6 9.06 12.23 9.03L11.28 8.08C11.5 8.03 11.75 8 12 8M14.97 11.77C14.94 11.4 14.86 11.04 14.7 10.72L15.43 10C15.79 10.58 16 11.26 16 12C16 12.25 15.97 12.5 15.92 12.72L14.97 11.77M14.75 7.83C13.96 7.31 13 7 12 7C11.46 7 10.94 7.09 10.45 7.25L9.69 6.5C10.4 6.18 11.18 6 12 6C13.3 6 14.5 6.42 15.47 7.11L14.75 7.83M8.18 5L6.72 3.5C8.25 2.56 10.06 2 12 2C17.5 2 22 6.5 22 12C22 13.94 21.44 15.75 20.5 17.28L19 15.83C19.65 14.69 20 13.38 20 12C20 7.59 16.41 4 12 4C10.62 4 9.31 4.35 8.18 5M16.75 13.55C16.91 13.06 17 12.54 17 12C17 11 16.69 10.04 16.17 9.25L16.89 8.53C17.59 9.5 18 10.7 18 12C18 12.83 17.82 13.6 17.5 14.32L16.75 13.55Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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