With Font Awesome:
With Material Icons:
<div> <p> With Font Awesome:</p> <div> <ch5-button type="success" shape="rectangle" label="Btn1" iconClass="fas fa-address-book"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn2" iconClass="fas fa-anchor"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn3" iconClass="fas fa-battery-full"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn4" iconClass="fab fa-bluetooth-b"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn5" iconClass="fab fa-twitter"></ch5-button> </div> </div> <br><br><br> <div> <p> With Material Icons:</p> <div> <ch5-button type="success" shape="rectangle" label="Btn1" iconClass="material-icons alarm_on"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn2" iconClass="material-icons bookmark"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn3" iconClass="material-icons announcement"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn4" iconClass="material-icons account_box"></ch5-button> <ch5-button type="success" shape="rectangle" label="Btn5" iconClass="material-icons aspect_ratio"></ch5-button> </div> </div>
.material-icons.alarm_on:before { content:"alarm_on"; } .material-icons.bookmark:before { content:"bookmark"; } .material-icons.announcement:before { content:"announcement"; } .material-icons.account_box:before { content:"account_box"; } .material-icons.aspect_ratio:before { content:"aspect_ratio"; }
<ch5-button type="success" shape="rectangle" label="Icon First" iconClass="fas fa-arrow-alt-circle-left" iconPosition="first"></ch5-button> <ch5-button type="success" shape="rectangle" label="Icon Last" iconClass="fas fa-arrow-right" iconPosition="last"></ch5-button> <ch5-button type="success" shape="rectangle" label="Icon Top" iconClass="fas fa-battery-full" iconPosition="top"></ch5-button> <ch5-button type="success" shape="rectangle" label="Icon Bottom" iconClass="fas fa-chevron-down" iconPosition="bottom"></ch5-button>
<div> <h3>The icon for the bellow button will be changed</h3> <ch5-button type="success" shape="rectangle" label="Font Icon" receivestateiconclass="current_icon"></ch5-button> </div> <br /> <div> <h5>Click on the button bellow in order to change the icon</h5> <ch5-button type="success" shape="rectangle" label="Address Book" iconClass="fas fa-address-book" sendeventonclick="trigger_icon_change_address"></ch5-button> <ch5-button type="success" shape="rectangle" label="Anchor" iconClass="fas fa-anchor" sendeventonclick="trigger_icon_change_anchor"></ch5-button> </div>