<!DOCTYPE html><html><head><title>Icon Button Sizing</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="small"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="medium"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="large"></igc-icon-button></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
<!DOCTYPE html><html><head><title>Icon Button Variants</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="flat"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="outlined"></igc-icon-button></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Icon Button Sizing</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="small"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="medium"></igc-icon-button><igc-icon-buttonname="thumb-up"collection="material"variant="contained"class="large"></igc-icon-button></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
아이콘 버튼 구성 요소는 href 속성이 설정되면 내부 구조를 <button>에서 <a> 유형 요소로 변경합니다. 이 경우 아이콘 버튼은 일반 링크로 간주될 수 있습니다. href 속성을 설정하면 아이콘 버튼의 rel, target 및 download 속성도 설정할 수 있습니다.
<!DOCTYPE html><html><head><title>Icon Button Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" /><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample"><igc-icon-buttonname="thumb-up"collection="material"variant="contained"></igc-icon-button></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html