2 Replies Latest reply on Jan 31, 2011 7:12 AM by Kretep

    Vector graphics for a button icon


      I am trying to set button icons for a number of (spark) buttons and I want these icons to be vector graphics. I have tried a number of options, but none of them seem to be the optimal solution.


            • I tried setting the button's icon to an embedded SVG file (b.t.w. the spark button's icon property only seems to be available in build, but apparently SVG is deprecated in Flex 4 and it tells me to use FXG (which would be okay with me, if it only worked).
            • I tried setting the button's icon to an embedded FXG file, which doesn't work because there is "no transcoder registered for mimeType text/fxg".
            • I also tried creating a custom skin that displays the icon in a BitmapImage, as is described here: http://flexwiz.amosl.com/flex/flex4/tip-easy-spark-icon-button/ This works fine for embedded raster graphics. To accommodate for vector graphics, I thought I would set up the icon as an mxml Graphic class and assign it to the BitmapImage in the skin (shouldn't the BitmapImage then render it?). But no icon is rendered.
            • From the Adobe documentation and various videos I have seen, it seems to be required to create a separate skin for each button (similar to the above option, but hard-coding the Graphic class icon into each of the skins). Only, it seems like a whole lot of redundancy to create a separate skin for each and every button, because most of the code would consist of copies of the spark ButtonSkin (apparently inheritance isn't an option either...) I only want the vector graphic to show on top of the ButtonSkin.


      So what is the best way to put vector graphics on top of an existing button?




        • 1. Re: Vector graphics for a button icon
          Shongrunden Adobe Employee

          Here's an example of how to use an FXG file as an icon in a Button:




          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"



              <s:Button icon="{MyIcon}" label="circle icon" />







          <?xml version="1.0" encoding="utf-8" ?>

          <Graphic version="2.0" xmlns="http://ns.adobe.com/fxg/2008">

               <Ellipse width="20" height="20">


                         <SolidColor color="#FF0000" />




          • 2. Re: Vector graphics for a button icon
            Kretep Level 1

            Thanks for your reply. I have been playing around a bit, and it indeed seems to be this simple, but it only works for the Flex SDK build Is this correct?


            When I use the SDK that comes with Burrito, the icon doesn't show. Is there a fix for this? (I also require the mobile functionality, which is not available in the 18623-build...)