<template functional> <span :aria-hidden="props.decorative" :aria-label="props.title" :class="[data.class, data.staticClass]" class="material-design-icon octagram-outline-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="M2.2,16.06L3.88,12L2.2,7.94L6.26,6.26L7.94,2.2L12,3.88L16.06,2.2L17.74,6.26L21.8,7.94L20.12,12L21.8,16.06L17.74,17.74L16.06,21.8L12,20.12L7.94,21.8L6.26,17.74L2.2,16.06M4.81,9L6.05,12L4.81,15L7.79,16.21L9,19.19L12,17.95L15,19.19L16.21,16.21L19.19,15L17.95,12L19.19,9L16.21,7.79L15,4.81L12,6.05L9,4.81L7.79,7.79L4.81,9Z"> <title>{{ props.title }}</title> </path> </svg> </span> </template> <script> export default { name: "OctagramOutlineIcon", props: { title: { type: String, default: "Octagram Outline icon" }, decorative: { type: Boolean, default: false }, fillColor: { type: String, default: "currentColor" }, size: { type: Number, default: 24 } } } </script>