'How can I change button icons back to normal size inside of MessagePage?

Since I noticed my button icons are normal sized in other views I guessed that it's because of the sap.m.MessagePage element.

Huge icon

Is there a nice solution for this or did the developers just wanted us to never use icons inside of buttons in that element? :D

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView"
], async XMLView => (await XMLView.create({
  definition: document.getElementById("myxmlview").textContent,
  height: "100%",
})).placeAt("content"));
<script defer id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-libs="sap.ui.core,sap.m"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<!-- Issue fully reproducible with UI5 <= 1.87 and partially reproducible until 1.93 -->
<script id="myxmlview" type="text/xml">
  <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
    <App>
      <MessagePage showHeader="false" icon="sap-icon://sap-ui5" text="UI5" description="sap.m.MessagePage">
        <buttons>
          <Button icon="sap-icon://message-warning" text="Change security settings" />
        </buttons>
      </MessagePage>
    </App>
  </mvc:View>
</script>
<body id="content" class="sapUiBody">
</body>
csssapui5


Solution 1:[1]

Update: the issue is no longer reproducible since UI5 1.94 (commit: d90fbe7 / PR #3146).

Previous answer:

[...] did the developers just wanted us to never user icons inside of buttons in that element? :D

Kinda yes. :P According to Fiori design guidelines in the topic "Button Content":

A button can contain an icon OR a text.

But: even without text, the button icon doesn't look alright:
enter image description here

This is definitely a bug. Just created an issue here: https://github.com/SAP/openui5/issues/3145

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions