Форма шестиугольника с изображением и текстом

Question

Я использую это для рисования шестиугольника, я добавляю svg к нему.

Я хочу добавить изображение и текст в новую строку.

Я добавляю этот стиль

 .hexagon > span {
           display: inline-block;
           transition: var(--hex-transition);
      }

   <div class="hexagon color-angular">
    	<svg aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    		<title id="simpleicons-angular-icon">Angular icon</title>
    		<path d="M9.93 12.645h4.134L11.996 7.74"/>
    		<path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/>
    	</svg>
    	<span>Kitchen</span>
    </div>

Но показать текст внутри изображения

Answer 1

https://codepen.io/tushgraph/pen/agyrdO

.blokedtext{position:absolute; bottom:-12px; z-index:100; color:#000; font-family:arial; font-size:0.8em;}

Answer 2

.hexagon>span {
  transition: var(--hex-transition);
  display: flex;
  justify-content: center
}

<div class="hexagon color-angular">
  <svg aria-labelledby="simpleicons-angular-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title id="simpleicons-angular-icon">Angular icon</title><path d="M9.93 12.645h4.134L11.996 7.74"/><path d="M11.996.009L.686 3.988l1.725 14.76 9.585 5.243 9.588-5.238L23.308 3.99 11.996.01zm7.058 18.297h-2.636l-1.42-3.501H8.995l-1.42 3.501H4.937l7.06-15.648 7.057 15.648z"/>
 <text x="10" y="20" text-anchor="" fill="white" font-size="1">Kitchen</text>
  </svg>
</div>