Not able to Create a themable Forground Image

Hello All,

I needed to create a themable forground image. When I goggled it, I have found a control

<SharePoint:ThemedForegroundImage ThemeKey="test" ImageUrl="/_layouts/15/images/Test.png"  runat="server" />

When I have used it, It is not showing any image after applying theme.

The major concern is I am not able to understand What is ThemeKey Property?

Where I can define a themekey?

Still I know the workaround for it, Like I should use a div with background image like

<div class="testImg"></div>

.testImg
{
/* [RecolorImage(themeColor:"SuiteBarBackground",method:"Tinting")] */ background-image: url("/_layouts/15/images/Test.png");
    width:48px;
    height:48px;
}

But I don't want to convert all of my images in to Divs.

Thanks in advance

ajit