<template functional> <span :aria-hidden="props.decorative" :aria-label="props.title" :class="[data.class, data.staticClass]" class="material-design-icon target-variant-icon" role="img" @click="listeners.click ? listeners.click : () => true"> <svg :fill="props.fillColor" class="material-design-icon__svg" :width="props.size" :height="props.size" viewBox="0 0 24 24"> <path d="M22.08,11.04H20.08V4H13.05V2H11.04V4H4V11.04H2V13.05H4V20.08H11.04V22.08H13.05V20.08H20.08V13.05H22.08V11.04M18.07,18.07H13.05V16.06H11.04V18.07H6V13.05H8.03V11.04H6V6H11.04V8.03H13.05V6H18.07V11.04H16.06V13.05H18.07V18.07M13.05,12.05C13.05,12.6 12.6,13.05 12.05,13.05C11.5,13.05 11.04,12.6 11.04,12.05C11.04,11.5 11.5,11.04 12.05,11.04C12.6,11.04 13.05,11.5 13.05,12.05Z"> <title>{{ props.title }}</title> </path> </svg> </span> </template> <script> export default { name: "TargetVariantIcon", props: { title: { type: String, default: "Target Variant icon" }, decorative: { type: Boolean, default: false }, fillColor: { type: String, default: "currentColor" }, size: { type: Number, default: 24 } } } </script>