<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon watch-vibrate-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="M0,9H2V15H0V9M12,7.5C14.47,7.5 16.47,9.53 16.46,12C16.45,12.38 16.4,12.76 16.3,13.13L17.5,14.31C17.81,13.58 18,12.8 18,12C18,10.17 17.16,8.44 15.72,7.31L15,3H9L8.59,5.39L10.86,7.66C11.23,7.55 11.61,7.5 12,7.5M21,17V7H19V15.8L20.2,17H21M16.5,15.86L22.11,21.46L20.84,22.73L15.55,17.44L15,21H9L8.27,16.72C5.85,14.82 5.27,11.4 6.91,8.8L1.11,3L2.39,1.73L8.09,7.44L9.17,8.5L15.44,14.79L16.5,15.86M14.05,15.94L8.05,9.94C7.7,10.57 7.5,11.28 7.5,12C7.5,14.47 9.53,16.47 12,16.46C12.72,16.46 13.42,16.28 14.05,15.94M22,9V15H24V9H22M3,17H5V7H3V17Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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