На кнопке не отображается картинка

Пишу веб-программу по учету заказов. К каждой строчке таблицы добавлена кнопка редактировать(синяя), удалить (красная). Кнопки стилизованы внешней таблицей готовый css-стилей. Кастамизирую стиль путем добавления внутренней таблицы стилей. Пытаюсь разместить на кнопке "редактировать" изображение (размер изображения 16 px*16px). Если я это делаю так <img src="/static/pencil.png"> , то на кнопке отображается не читаемая картинка

Если я добавляю картинку через свойства стиля background , то кнопка просто остается синей. Увеличение размера кнопки не помогает. Картинка размещена в папке src/main/resources/static/pencil.png, html-форма в папке src/main/resources/templates/ordersForm.html

<td>
           <form method="POST" th:action="@{/orders/delete(id=${order.id})}">
<-- кнопка редактировать -->

               <a th:href="@{/orders/showUpdateForm(id=${order.id})}" class="btn btn-info"> <img src="/static/pencil.png" ></a>
               <style>
                   .btn-info {

                   width: 30px !important;
                   height: 30px !important;
<!--                   background: transparent url(src/main/resources/static/pencil.png) no-repeat !important;-->
<!--                  background-image: url(src/main/resources/static/pencil.png) !important;-->
<!--                   background-size: cover !important;-->
                   }
               </style>
<-- кнопка удалить -->
             <button type="submit" name="submit" value="value" class="btn btn-danger ml-2">X</button>
               <style>
                   button {
                   width: 30px !important;
                   height: 30px !important;
                   margin: 0 !important;
                   font-size: 13px !important;
                   text-align: center !important;
                   padding: 0 !important;
                   }
               </style>
           </form>
        </td>

Есть у кого-нибудь понимание как можно это поправить?