jqwidgets-scripts-custom/demos/Angular/buttons/images/src/app/app.component.html

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

<h3>Image Before Text</h3>
<table>
    <tr>
        <td>Image Left/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'left'" value=''
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Left/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'center'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Left/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'right'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Image Center/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'left'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Center/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'center'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Center/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'right'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Image Right/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'left'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Right/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'center'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Right/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'right'" 
                [textImageRelation]="'imageBeforeText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
</table>
<h3>Text Before Image</h3>
<table>
    <tr>
        <td>Text Left/Image Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'left'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Left/Image Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'left'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Left/Image Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'left'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Text Center/Image Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'center'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Center/Image Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'center'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Center/Image Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'center'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Text Right/Image Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'right'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Right/Image Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'right'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Right/Image Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'right'" 
                [textImageRelation]="'textBeforeImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
    </tr>
</table>
<h3>Image Above Text</h3>
<table>
    <tr>
        <td>Image Left/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'left'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Left/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'left'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Left/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'right'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Image Center/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'left'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Center/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'center'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Center/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'right'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Image Right/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'left'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Right/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'center'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Right/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'right'" 
                [textImageRelation]="'imageAboveText'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
</table>
<h3>Text Above Image</h3>
<table>
    <tr>
        <td>Text Left/Image Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'top'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Left/Image Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'left'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Left/Image Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'left'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Text Center/Image Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'center'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Center/Image Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'center'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Center/Image Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'center'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Text Right/Image Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'right'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Right/Image Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'right'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
        <td>Text Right/Image Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'right'" 
                [textImageRelation]="'textAboveImage'" [imgSrc]="'https://www.jqwidgets.com/angular/images/twitter.png'">
              Button
            </jqxButton>
        </td>
    </tr>
</table>
<h3>Overlay(Text and Image can be one over another)</h3>
<table>
    <tr>
        <td>Image Left/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'left'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Left/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'center'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Left/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'left'" [textPosition]="'right'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Image Center/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'left'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
            </td>
        <td>Image Center/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'center'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Center/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'center'" [textPosition]="'right'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
    <tr>
        <td>Image Right/Text Left</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'left'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
            </td>
        <td>Image Right/Text Center</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'center'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
        <td>Image Right/Text Right</td>
        <td>
            <jqxButton [theme]="'material'" [width]="120" [imgPosition]="'right'" [textPosition]="'right'" 
                [textImageRelation]="'overlay'" [imgSrc]="'https://www.jqwidgets.com/angular/images/facebook.png'">
              Button
            </jqxButton>
        </td>
    </tr>
</table>