Поместите значок кнопки SAPUI5 поверх текста (не слева от него)

Question

Мне нужно разместить иконку моего sap.m.Button поверх текста.

Я нашел это сообщение в блоге: Кнопка с текстом под значком но, к сожалению, этот метод, похоже, больше не работает.

Есть ли удобный способ размещения иконки поверх текста с помощью CSS?

Answer 1

Вы можете достичь этого, используя пользовательский класс & CSS

VIEW

<Button class="newBtn" icon="sap-icon://sys-help"  text="Default Button" />

CSS

.newBtn .sapMBtnInner {
    height: 4rem; /* Increase it to 6rem */
}
.newBtn .sapMBtnText>.sapMBtnIcon {
   display: contents;
   line-height: 3.8rem; /* Add this line when you are using height as 6rem */
}
.newBtn .sapMBtnInner.sapMBtnText {
    padding-left: 0.75rem;
}    
.newBtn .sapMBtnIcon { 
   font-size: 1.7rem;   /* Icon size */
}
.newBtn .sapMBtnContent {
    line-height: normal;
}