google-material-iconsapache-royale

issue with material-icons : no picture icon on Apache Royale

I want to use an icon image like in TourDeJewel, but when I use this code then the text "MENU" is showing instead of icon picture. (sdk 0.9.6)

    <j:IconButton >
        <j:icon>
            <js:FontIcon text="menu" material="true"/>
        </j:icon>
    </j:IconButton>

After check with browser inspector tool then material-icons css is missing

Could someone tell me why ? Thank you in advance...

Solution

  • To get the CSS linked automatically you need to use MaterialIconType class at least one time so compiler can process it.

    The reason is that class has an inject_html directive in its constructor so when the compiler finds it includes it automatically.

    In Tour De Jewel we use that class through binding:

    <j:IconButton click="drawer.isOpen ? drawer.close() : drawer.open()">
    <j:icon>
        <js:FontIcon text="{MaterialIconType.MENU}" material="true"/>
    </j:icon>
</j:IconButton>

    (Note in that file we use a binding bead at top level to make the binding work (i.e: <js:ContainerDataBinding/>).

    If you don't want to use MaterialIconType you can link it manually using a custom html template.