Button with text UNDER the icon

Question

Ho,
I want to create a square button, where the text is UNDER the icon.
Is there an easy way to do this, or do I need to write my own component?
Cheers
Jens

Answer 1

Hi,
Use ID in your button. Suppose i have used buttonId then my CSS will look like this.
<style type="text/css">
#buttonId-img.sapUiIcon {
text-align: center;
display: block;
vertical-align: top;
line-height: 100%;
#buttonId.sapMBtn  {
height: 5.0rem;
min-width: 5.0rem;
margin: 0;
padding: 0;
vertical-align: top;
background-color: #f7f7f7;
border: 1px solid #bfbfbf;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.875rem;
.sapMBtnContent>.sapUiIcon {
color: #666666;
font-size: 1.375rem;
line-height: 2.875rem;
width: 2.875rem;
text-align: center;
margin: auto;
</style>
This is screenshot.
Id of first button id buttonId and for second is button1Id.
This is view code now.
       createContent : function(oController) {
              jQuery.sap.require("sap.ui.core.IconPool");
              var oButton = new sap.m.Button("buttonId",{
                     text: "Press Me",
                     icon: sap.ui.core.IconPool.getIconURI("customer"),
              var oButton1 = new sap.m.Button("button1Id",{
                     text: "Press Me",
                     icon: sap.ui.core.IconPool.getIconURI("customer"),
              return new sap.m.Page({
                     title: "Title",
                     content: [
                               oButton, oButton1
Go through 3rd method of this document for doing experiments with your CSS. Implementing CSS in SAPUI5 Application
Regards
Dhananjay