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>