The Web Components Icon component allows you to easily display font or choose from a large set of predefined SVG icons, but it also gives you the ability to create custom font icons for your project. Benefiting from a number of attributes, you can define or change the size of the icon in use or apply different styles to it.
<!DOCTYPE html><html><head><title>Icon 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="container sample"><divstyle="
display: flex;
align-items: center;
width: 400px;
border: 1px solid gainsboro;
"
><igc-iconname="build"collection="material"class="small"></igc-icon><igc-iconname="build"collection="material"class="medium"></igc-icon><igc-iconname="build"collection="material"class="large"></igc-icon></div></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
For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.
The IgcIconComponent doesn't contain any icons on its own. It's a conduit for displaying any registered SVG images.
Adding Icons
To register an image as an icon, all you have to do is import one of the 2 utility functions from the icons registry service that allows you to add icons to an icon collection.
Then you'd use it in the same way as described in the component sample above.
Size
The icon component supports three icon sizes - small, medium(default), and large. In order to change the size of the icon, you can utilize the --ig-size CSS variable as follows:
<!DOCTYPE html><html><head><title>Icon 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="container sample"><divstyle="
display: flex;
align-items: center;
width: 400px;
border: 1px solid gainsboro;
"
><igc-iconname="build"collection="material"class="small"></igc-icon><igc-iconname="build"collection="material"class="medium"></igc-icon><igc-iconname="build"collection="material"class="large"></igc-icon></div></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
Mirrored
Some icons need to look a little different when used in Right-to-Left(RTL) mode. For that reason we provide a mirrored attribute that, when set, flips the icon horizontally.
<igc-iconname="search"mirrored></igc-icon>html
Styling
The icon component can be styled by applying styles directly to the IgcIconComponent element;
<!DOCTYPE html><html><head><title>Icon 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="container sample"><divstyle="
display: flex;
align-items: center;
width: 400px;
border: 1px solid gainsboro;
"
><igc-iconname="search"collection="material"></igc-icon></div></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