If you want to create a multi-line button with text and icons (as pictured below), you’re going to need to use the “advanced” text settings properties called FormattedString.
Normally, when you set the text of a button, you simply use the text property:
<button text="Add Scene" />
If you want to add an icon to this button, we can add a unicode string that represents an icon available in an Icon Font (that I’m going to assume you’ve already added to your app):
XML
<button text=" Add Scene" class="btnIcon" />
CSS
.btnIcon {
font-family: "Ionicons";
font-size: 60;
}
This will now give us a button with our icon and text on one line…AND one size (big). Let’s use FormattedString to fix this up:
XML
<button>
<formattedString>
<span text="" fontFamily="Ionicons" fontSize="60" />
<span text="Add Scene" />
</formattedString>
</button>
Getting closer. Now we have our icon and text rendered at different sizes, but still on the same line. To add a line break between our icon and text, we can use another unicode character:
XML
<button>
<formattedString>
<span text="
" fontFamily="Ionicons" fontSize="60" />
<span text="Add Scene" />
</formattedString>
</button>
This will now give us the desired result as pictured above: icon and text in a button (on separate lines) with the ability to control the styling for the icon and text separately.
NOTE: When we start using FormattedString, we do have to specify our styles in-line using XML attributes instead of using CSS styling. Hopefully this limit will go away in the future, but here today (as of {N} 2.4).
NOTE 2: There is an alternate, more verbose FormattedString syntax that looks like this:
XML
<button>
<button.formattedText>
<formattedString>
<formattedString.spans>
<span text="Add Scene" />
</formattedString.spans>
</formattedString>
</button.formattedText>
</button>
DON’T use this syntax. It works, but only in non-Angular {N} apps. The more concise syntax works in ALL {N} apps and it’s WAY easier to read. (Docs ref)
Hope this helps!
