diff --git a/samples/layouts/icon/references/.prettierrc b/samples/layouts/icon/references/.prettierrc
new file mode 100644
index 000000000..15a7c7c6c
--- /dev/null
+++ b/samples/layouts/icon/references/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/layouts/icon/references/ReadMe.md b/samples/layouts/icon/references/ReadMe.md
new file mode 100644
index 000000000..6cc890bc7
--- /dev/null
+++ b/samples/layouts/icon/references/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Sizing feature using [Icon](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+ <body>
+ <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+ <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+ </a>
+ <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+ <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+ </a>
+ <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/icon/sizing" rel="noopener noreferrer">
+ <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+ </a>
+ <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/icon/sizing?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+ <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+ </a>
+ </body>
+</html>
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/layouts/icon/sizing
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/layouts/icon/references/index.html b/samples/layouts/icon/references/index.html
new file mode 100644
index 000000000..1e3c9477d
--- /dev/null
+++ b/samples/layouts/icon/references/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+ <head>
+ <title>Icon References</title>
+ <meta charset="UTF-8" />
+
+ <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+ <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+ </head>
+
+ <body>
+ <div id="root">
+ <div class="container sample">
+ <div class="controls">
+ <igc-icon name="rewind" collection="player"></igc-icon>
+ <igc-icon name="control" collection="player"></igc-icon>
+ <igc-icon name="forward" collection="player"></igc-icon>
+ </div>
+ </div>
+ </div>
+ <!-- This script is needed only for parcel and it will be excluded for webpack -->
+ <% if (false) { %>
+ <script src="src/index.ts"></script>
+ <% } %>
+ </body>
+</html>
diff --git a/samples/layouts/icon/references/package.json b/samples/layouts/icon/references/package.json
new file mode 100644
index 000000000..b35b471fe
--- /dev/null
+++ b/samples/layouts/icon/references/package.json
@@ -0,0 +1,60 @@
+{
+ "name": "example-ignite-ui-web-components",
+ "description": "This project provides example of using Ignite UI for Web Components",
+ "author": "Infragistics",
+ "version": "1.0.0",
+ "license": "",
+ "private": true,
+ "homepage": ".",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "npm run build:prod",
+ "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start": "npm run serve:dev",
+ "build:legacy": "npm run build:prod:legacy",
+ "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start:legacy": "npm run serve:dev:legacy"
+ },
+ "dependencies": {
+ "@webcomponents/custom-elements": "^1.4.1",
+ "@webcomponents/template": "^1.4.2",
+ "babel-runtime": "^6.26.0",
+ "core-js": "^3.6.5",
+ "igniteui-webcomponents": "file:../../../../../igniteui-webcomponents/dist/igniteui-webcomponents-0.0.0.tgz",
+ "lit": "^2.0.0",
+ "lit-html": "^2.2.0",
+ "tslib": "^2.0.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.8.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.10.0",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-typescript": "^7.8.3",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^1.0.0",
+ "csv-loader": "^3.0.2",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "parcel-bundler": "^1.6.1",
+ "source-map": "^0.7.3",
+ "style-loader": "^0.22.1",
+ "tsconfig-paths-webpack-plugin": "^4.0.0",
+ "typescript": "^4.4.4",
+ "webpack": "^5.74.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.11.1",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ }
+}
diff --git a/samples/layouts/icon/references/sandbox.config.json b/samples/layouts/icon/references/sandbox.config.json
new file mode 100644
index 000000000..52c787510
--- /dev/null
+++ b/samples/layouts/icon/references/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "parcel"
+}
\ No newline at end of file
diff --git a/samples/layouts/icon/references/src/index.css b/samples/layouts/icon/references/src/index.css
new file mode 100644
index 000000000..edb96af06
--- /dev/null
+++ b/samples/layouts/icon/references/src/index.css
@@ -0,0 +1,50 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+.controls {
+ display: flex;
+ gap: 1rem;
+ flex-direction: row;
+ border: 1px solid hsl(var(--ig-gray-300));
+ justify-items: center;
+ justify-content: center;
+}
+
+igc-icon {
+ --size: 3rem;
+ color: hsl(var(--ig-gray-600));
+}
+
+igc-icon[name="control"] {
+ position: relative;
+ --size: 4rem;
+ cursor: pointer;
+ color: hsl(var(--ig-gray-800));
+ z-index: 0;
+
+ &::after {
+ position: absolute;
+ content: '';
+ inset: 0;
+ background: hsl(var(--ig-warn-500));
+ border-radius: 50%;
+ animation: pulse 1.25s ease-in-out infinite both;
+ z-index: -1;
+ }
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(.5);
+ opacity: 0;
+ }
+
+ 50% {
+ transform: scale(1);
+ opacity: .5;
+ }
+
+ 100% {
+ transform: scale(.5);
+ opacity: 0;
+ }
+}
diff --git a/samples/layouts/icon/references/src/index.ts b/samples/layouts/icon/references/src/index.ts
new file mode 100644
index 000000000..b22d82adf
--- /dev/null
+++ b/samples/layouts/icon/references/src/index.ts
@@ -0,0 +1,50 @@
+import { defineComponents, IgcIconComponent, registerIcon, setIconRef } from "igniteui-webcomponents";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import "./index.css";
+
+defineComponents(IgcIconComponent);
+
+export class IconReferences {
+ private playing = false;
+
+ constructor() {
+ const icon = document.querySelector("igc-icon[name='control']");
+ icon?.addEventListener("click", this.togglePlayer.bind(this));
+ this.setIcon();
+ }
+
+ public static async build() {
+ await registerIcon("rewind", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_fast_rewind_24px.svg", "material");
+ await registerIcon("forward", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_fast_forward_24px.svg", "material");
+ await registerIcon("play", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_play_circle_filled_24px.svg", "material");
+ await registerIcon("pause", "https://cdn.jsdelivr.net/npm/material-design-icons@3.0.1/av/svg/production/ic_pause_circle_filled_24px.svg", "material");
+
+ setIconRef("rewind", "player", {
+ name: "rewind",
+ collection: "material"
+ });
+
+ setIconRef("forward", "player", {
+ name: "forward",
+ collection: "material"
+ });
+
+ return new IconReferences();
+ }
+
+ private setIcon() {
+ setIconRef("control", "player", {
+ name: this.playing ? "pause" : "play",
+ collection: "material"
+ });
+ }
+
+ private togglePlayer() {
+ this.playing = !this.playing;
+ this.setIcon();
+ }
+}
+
+(async () => {
+ await IconReferences.build();
+})();
diff --git a/samples/layouts/icon/references/tsconfig.json b/samples/layouts/icon/references/tsconfig.json
new file mode 100644
index 000000000..7c639d7f0
--- /dev/null
+++ b/samples/layouts/icon/references/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
diff --git a/samples/layouts/icon/references/tslint.json b/samples/layouts/icon/references/tslint.json
new file mode 100644
index 000000000..18e202b1f
--- /dev/null
+++ b/samples/layouts/icon/references/tslint.json
@@ -0,0 +1,53 @@
+{
+ "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "linterOptions": {
+ "exclude": [
+ "node_modules/**/*.ts",
+ "**/odatajs-4.0.0.js",
+ "src/images/*.*"
+ ]
+ },
+ "rules": {
+ "only-arrow-functions": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "no-var-requires": false,
+ "no-var": false,
+ "no-var-keyword": false,
+ "no-console": false,
+ "no-string-literal": false,
+ "no-unused-vars": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "jsx-no-lambda": false,
+ "ordered-imports": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "member-ordering": false,
+ "curly": [false, "ignore-same-line"],
+ "max-classes-per-file": [true, 10],
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "no-useless-constructor": false,
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/type-annotation-spacing": "off"
+ },
+ "jsRules": {
+ "only-arrow-functions": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "no-var-requires": false,
+ "no-console": false,
+ "no-unused-vars": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "jsx-no-lambda": false,
+ "ordered-imports": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "curly": [false, "ignore-same-line"],
+ "max-classes-per-file": [true, 10],
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "no-useless-constructor": false,
+ "@typescript-eslint/no-useless-constructor": "off"
+ }
+ }
\ No newline at end of file
diff --git a/samples/layouts/icon/references/webpack.config.js b/samples/layouts/icon/references/webpack.config.js
new file mode 100644
index 000000000..9d11a6155
--- /dev/null
+++ b/samples/layouts/icon/references/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+ const nodeEnv = process.env.NODE_ENV || 'development';
+ const isProd = nodeEnv === 'production';
+ const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+ console.log(">> webpack nodeEnv=" + nodeEnv);
+ console.log(">> webpack isProd=" + isProd);
+ console.log(">> webpack isLegacy=" + isLegacy);
+ const presets = [
+ ["@babel/preset-env", {
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "targets": {
+ "browsers": isLegacy ? ["defaults"] : [
+ "last 2 Chrome versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 2 Firefox versions",
+ "last 2 Edge versions"]
+ }
+ }],
+ "@babel/preset-typescript"
+ ];
+
+ return {
+ entry: isLegacy ? [
+ path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+ path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+ path.resolve(__dirname, 'src')
+ ] : path.resolve(__dirname, 'src'),
+ devtool: isProd ? false : 'source-map',
+ output: {
+ filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+ globalObject: 'this',
+ path: path.resolve(__dirname, 'dist'),
+ },
+
+ resolve: {
+ mainFields: ['esm2015', 'module', 'main'],
+ extensions: ['.ts', '.js', '.json'],
+ plugins: [new TsconfigPathsPlugin({
+ configFile: './tsconfig.json',
+ extensions: ['.ts', '.js'],
+ mainFields: ['esm2015', 'module', 'main']
+ })]
+ },
+
+ module: {
+ rules: [
+ { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+ { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+ { test: /\.xml$/, use: ['xml-loader'] },
+ { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+ {
+ test: /worker\.(ts|js)$/,
+ use: [
+ { loader: 'worker-loader' },
+ {
+ loader: 'babel-loader', options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ },
+ exclude:
+ function (modulePath) {
+ return /node_modules/.test(modulePath) &&
+ !/igniteui-webcomponents/.test(modulePath) &&
+ !/lit-html/.test(modulePath);
+ }
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+ }),
+ new HtmlWebpackPlugin({
+ title: 'for-cs',
+ template: 'index.html'
+ }),
+ new ForkTsCheckerWebpackPlugin()
+ ]
+ };
+};