### Install Tooltip.js with npm

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Tooltip.js using npm.

```bash
npm install tooltip.js --save
```

--------------------------------

### Install Tooltip.js with yarn

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Tooltip.js using yarn.

```bash
yarn add tooltip.js
```

--------------------------------

### Example Display Layout

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099K-sdk/TBS_FORM1099K_FRONTEND/src/styles/css/icons-mdi/preview.html

Flexbox-based layout for displaying icon examples, allowing for wrapping and specific alignment.

```css
div.examples {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem 1.25rem;
}
div.examples > div {
  display: flex;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
div.examples > div > div:first-child {
  display: flex;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.4);
  background: #FFF;
  z-index: 1;
  align-items: center;
  justify-content: center;
}
div.examples > div > div:first-child + div {
  display: flex;
  margin-left: -0.25rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  background: #222;
  border-radius: 0 0.25rem 0.25rem 0;
}
div.examples > div > div:first-child + div > code {
  color: #FFF;
  align-self: center;
}
div.examples > div > div.dark:first-child {
  background: #444;
}
div.examples i {
  display: flex;
}
div.examples-size > div > div:first-child {
  min-width: 3rem;
}
```

--------------------------------

### Install Popper.js with Bower

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Popper.js using Bower.

```bash
bower install popper.js --save
```

--------------------------------

### Install Popper.js with NuGet

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Popper.js using NuGet.

```powershell
PM> Install-Package popper.js
```

--------------------------------

### Install Popper.js with yarn

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Popper.js using yarn.

```bash
yarn add popper.js
```

--------------------------------

### Install Popper.js with npm

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Popper.js using npm.

```bash
npm install popper.js --save
```

--------------------------------

### Example Display Layout

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/tin-matching-recipients-sdk/TBS_TIN_MATCHING_RECIPIENTS_FRONTEND/src/styles/css/icons-mdi/preview.html

Styles a flex container for displaying examples, allowing them to wrap and defining margins.

```css
div.examples { display: flex; flex-wrap: wrap; margin: 0.5rem 1.25rem; }
div.examples > div { display: flex; margin-right: 0.5rem; margin-bottom: 0.5rem; }
div.examples > div > div:first-child { display: flex; padding: 0.5rem; border-radius: 0.25rem; box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.4); background: #FFF; z-index: 1; align-items: center; justify-content: center; }
div.examples > div > div:first-child + div { display: flex; margin-left: -0.25rem; padding: 0.5rem 0.75rem 0.5rem 1rem; background: #222; border-radius: 0 0.25rem 0.25rem 0; }
div.examples > div > div:first-child + div > code { color: #FFF; align-self: center; }
div.examples > div > div.dark:first-child { background: #444; }
div.examples i { display: flex; }
div.examples-size > div > div:first-child { min-width: 3rem; }
```

--------------------------------

### Install Tooltip.js with Bower

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/js/README.md

Use this command to install Tooltip.js using Bower via unpkg.com CDN. Note that Bower is not officially supported and this method has limitations.

```bash
bower install tooltip.js=https://unpkg.com/tooltip.js --save
```

--------------------------------

### Start the Application

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/README.md

Run the application by typing this command in both frontend and backend terminals. The Node.js application runs on localhost:3000 and the React JS application runs on localhost:3001.

```bash
npm run start
```

--------------------------------

### Copy NPM Install Command

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Adds a click event listener to an element with the ID 'npm' to copy the npm installation command for '@mdi/font' to the clipboard. This is useful for providing easy installation instructions.

```javascript
document.getElementById('npm').addEventListener('click', function () { copyText('npm install @mdi/font'); });
```

--------------------------------

### Install NPM Packages

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/README.md

Install npm packages listed in the package.json file by running this command in both frontend and backend terminals.

```bash
npm install
```

--------------------------------

### CSS for Example Layout

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Defines a flexbox layout for displaying icon examples, including styling for the icon itself and its associated code.

```CSS
div.examples {
    display: flex;
    flex-wrap: wrap;
    margin: 0.5rem 1.25rem;
}

div.examples > div {
    display: flex;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

div.examples > div > div:first-child {
    display: flex;
    padding: 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.4);
    background: #FFF;
    z-index: 1;
    align-items: center;
    justify-content: center;
}

div.examples > div > div:first-child + div {
    display: flex;
    margin-left: -0.25rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    background: #222;
    border-radius: 0 0.25rem 0.25rem 0;
}

div.examples > div > div:first-child + div > code {
    color: #FFF;
    align-self: center;
}

div.examples > div > div.dark:first-child {
    background: #444;
}

div.examples i {
    display: flex;
}

div.examples-size > div > div:first-child {
    min-width: 3rem;
}
```

--------------------------------

### Start Development Server

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/README.md

Runs the React application in development mode. Opens the app at http://localhost:3000 and reloads on changes. Lint errors are shown in the console.

```bash
npm start
```

--------------------------------

### Get Server Time API Response

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/oauth-sdk/README.md

Example response from the GetServerTime API, providing server date, time, and timezone.

```json
{
    "StatusCode": 200,
    "StatusName": "Ok",
    "StatusMessage": "Successful API call",
    "ServerDate": "10/10/2023",
    "ServerTime": "06:05:48",
    "TimeZone": "UTC",
    "UnixTs": "1696917948",
    "Errors": null
}
```

--------------------------------

### Example Icon Usage

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Demonstrates how to use icons within different HTML elements, including inline code and paragraphs. Shows icons with and without dark backgrounds.

```HTML
<p>
    This is an example of an icon in a paragraph.
    <i class="mdi"></i>
    And here is the code for it:
    <code>mdi</code>
</p>
<p class="note">
    This is a note about icons.
    <i class="mdi"></i>
</p>
<p class="deprecated">
    This icon is deprecated.
    <i class="mdi"></i>
</p>
<p class="extras">
    Some extra text.
    <i class="mdi"></i>
</p>
<p>
    <i class="mdi dark-demo"></i>
    This icon has a dark background.
</p>
```

--------------------------------

### Sample JWT

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/oauth-sdk/README.md

An example of a generated JSON Web Token (JWT) access token.

```text
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3  
MiOiJ0ZXN0YXBpLnRheGJhbmRpdHMuY29tIiwiYXVkI  
joiYTU3NGI3NWYxOGIyNGZjMDlmOTAzOWZmYjVjYjA4ZjMiLCJp  
YXQiOjE1OTU5MjAxMjQsImV4cCI6MTU5NTkyNzMyNH0.BIg8764SOhOai9As  
3uRSidrF1-B9CxL6D5z4OggcVbs
```

--------------------------------

### Icon Display Example

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/preview.html

Provides a compact display of an icon and its name, suitable for integration into UI elements. The icon is displayed first, followed by its textual representation.

```html
<div>
  <div>
    <i class="mdi mdi-home"></i>
  </div>
  <div>
    <code>mdi-home</code>
  </div>
</div>
```

--------------------------------

### Install Material Design Icons Webfont

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/README.md

Install the Material Design Icons webfont package using npm. This is the primary method for including the icons in your project.

```bash
npm install @mdi/font
```

--------------------------------

### Sample JWS

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/oauth-sdk/README.md

An example of a generated JSON Web Signature (JWS).

```text
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOi  
I5NjhhOWM3OGRhZTI5YTI5Iiwic3ViIjoiOTY4YTljNzhkYWUyOWEyOSIsImF1  
ZCI6ImE1NzRiNzVmMThiMjRmYzA5ZjkwMzlmZmI1Y2IwOGYzIiwiaWF0IjoxN  
TE2MjM5MDIyfQ.HNQznxlPyVt62kyUeVwtk1-uzm1uDWH4NBDLShA6Ac0
```

--------------------------------

### Icon Display and Usage

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099K-sdk/TBS_FORM1099K_FRONTEND/src/styles/css/icons-mdi/preview.html

Demonstrates how to display Material Design Icons using `<i>` tags with the 'mdi' class and specific icon names. Includes examples for dark backgrounds and inline code usage.

```html
<p>
  <i class="mdi mdi-home"></i>
  <i class="mdi mdi-account-circle dark-demo"></i>
  <code>mdi-home</code>
</p>
```

--------------------------------

### Icon Display on Dark Background Example

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/preview.html

Demonstrates how an icon appears on a dark background within a compact display format. The icon is shown in a distinct div, followed by its code representation in another.

```html
<div class="dark">
  <div>
    <i class="mdi mdi-home"></i>
  </div>
  <div>
    <code>mdi-home</code>
  </div>
</div>
```

--------------------------------

### Build for Production

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/README.md

Builds the React application for production, optimizing it for performance. The output is placed in the `build` folder and is minified with hashed filenames.

```bash
npm run build
```

--------------------------------

### Code Block Styling

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099K-sdk/TBS_FORM1099K_FRONTEND/src/styles/css/icons-mdi/preview.html

Styles for preformatted text blocks, typically used for displaying code examples.

```css
pre {
  margin: 0 20px;
  font-family: Consolas, monospace;
  padding: 10px;
  border: 1px solid #DDD;
  background: #F1F1F1;
}
```

--------------------------------

### Ping API Response

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/oauth-sdk/README.md

Example response from the Ping API, used to verify JWT validity and API connectivity.

```json
{
    "StatusCode": 200,
    "StatusName": "Ok",
    "StatusMessage": "Successful API call",
    "APIVersion": "V1.7.3",
    "JWTExpiry": "1696917733",
    "TimeZone": "UTC",
    "Errors": null
}
```

--------------------------------

### Get Form1099-K Status

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099K-sdk/README.md

Retrieves the status of a Form1099-K submission. Requires SubmissionId and RecordId as query parameters and an Access Token in the header.

```APIDOC
## Get Form1099-K Status

### Description
Retrieves the status of a Form1099-K submission. Requires SubmissionId and RecordId as query parameters and an Access Token in the header.

### Method
GET

### Endpoint
https://testapi.taxbandits.com/{version}/Form1099K/Status

### Parameters
#### Query Parameters
- **SubmissionId** (string) - Required - The ID of the submission.
- **RecordId** (string) - Required - The ID of the record.

#### Headers
- **Authorization** (string) - Required - Bearer Token (Generated using TaxBandits OAuth authentication API).
```

--------------------------------

### Icon with Hover Effect

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099NEC-sdk/TBS_FORM1099NEC_FRONTEND/src/styles/css/icons-mdi/preview.html

Shows an icon that changes color on hover, typically achieved through CSS. The example includes the HTML structure for an icon within a span.

```html
<span><i class="mdi mdi-account-circle"></i><code class="mdi-code-json">mdi-account-circle</code></span>
```

--------------------------------

### Clone the TaxBandits Business SDK Repository

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/README.md

Clone the project into your local machine by entering the following command in your terminal.

```bash
https://github.com/TaxBandits/tbs-nodejs-sdk.git
```

--------------------------------

### Basic Icon Usage

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/preview.html

Demonstrates how to display a Material Design Icon using an `<i>` tag with the `mdi` class. This is the standard way to embed icons.

```html
<i class="mdi mdi-18px mdi-account"></i>
<i class="mdi mdi-24px mdi-account"></i>
<i class="mdi mdi-36px mdi-account"></i>
<i class="mdi mdi-48px mdi-account"></i>
```

--------------------------------

### Icon with Custom Size

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099NEC-sdk/TBS_FORM1099NEC_FRONTEND/src/styles/css/icons-mdi/preview.html

Illustrates how to set a custom size for an icon using a size class like 'mdi-24px'.

```html
<i class="mdi mdi-24px mdi-account-circle"></i>
```

--------------------------------

### Icon Styling and Copy

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/preview.html

Illustrates how to style icons within a list, including hover effects for the icon itself and its associated code representation. It also shows a mechanism for copying icon names.

```html
<div>
  <i class="mdi mdi-account"></i>
  <span>Account</span>
  <code>mdi-account</code>
</div>
```

--------------------------------

### Clone TaxBandits SDK Repository

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/README.md

Clone the TaxBandits SDK project from GitHub to your local machine to begin development.

```bash
git clone https://github.com/TaxBandits/tbs-nodejs-sdk.git
```

--------------------------------

### Sample Response for No Business Found

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/README.md

This JSON object represents the response when no businesses are found for a user. It indicates a 404 status and provides details about the empty response.

```json
{
"StatusCode": 404,
"StatusName": "NotFound",
"StatusMessage": "The resource you have specified cannot be found",
"Businesses": null,
"Page": 1,
"TotalRecords": 0,
"TotalPages": 0,
"PageSize": 10,
"Errors": null
}
```

--------------------------------

### Basic Popper.js Initialization

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/js/README.md

Initialize Popper.js to position a popper element relative to a reference element. Ensure both reference and popper DOM nodes exist.

```javascript
var reference = document.querySelector('.my-button');
var popper = document.querySelector('.my-popper');
var anotherPopper = new Popper(
    reference,
    popper,
    {
        // popper options here
    }
);
```

--------------------------------

### Run Tests

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/README.md

Launches the test runner in interactive watch mode. Provides more information on running tests.

```bash
npm test
```

--------------------------------

### Initialize and Display Icons

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/preview.html

This script initializes and displays Material Design Icons on the page. It categorizes icons into new and deprecated sections and updates counts for each category. It also hides the deprecated section if no deprecated icons are found.

```javascript
var icons = [];
var iconsCount = 0;
var newIconsCount = 0;
var deprecatedIconsCount = 0;

function getIconItem(icon, isNew, isDeprecated) {
    var div = document.createElement('div');
    div.className = 'col-md-3 col-sm-4 col-xs-6 col-xxs-12 p-0 m-0 text-center font-size-16px';
    var i = document.createElement('i');
    i.className = 'mdi mdi-' + icon.name;
    i.style.verticalAlign = 'middle';
    i.style.color = '#' + icon.hex;
    div.appendChild(i);
    var span = document.createElement('span');
    span.className = 'd-inline-block pl-2 vertical-align-middle font-weight-500';
    span.innerText = 'mdi-' + icon.name;
    div.appendChild(span);
    if (isNew) {
        var badge = document.createElement('span');
        badge.className = 'badge badge-success badge-pill';
        badge.innerText = 'New';
        badge.style.verticalAlign = 'middle';
        badge.style.marginLeft = '5px';
        div.appendChild(badge);
    }
    if (isDeprecated) {
        var badge = document.createElement('span');
        badge.className = 'badge badge-danger badge-pill';
        badge.innerText = 'Deprecated';
        badge.style.verticalAlign = 'middle';
        badge.style.marginLeft = '5px';
        div.appendChild(badge);
    }
    return div;
}

function isNew(icon) {
    return icon.version === "2.0.46";
}

function isDeprecated(icon) {
    return icon.deprecated === true;
}

(function () {
    icons.push({ "name": "blank", "hex": "f68c" });
    icons.forEach(function (icon) {
        var item = getIconItem(icon, isNew(icon), isDeprecated(icon));
        document.getElementById('icons').appendChild(item);
        if (isNew(icon)) {
            var newItem = getIconItem(icon, false, false);
            document.getElementById('newIcons').appendChild(newItem);
            newIconsCount++;
        }
        if (isDeprecated(icon)) {
            var deprecatedItem = getIconItem(icon, false, false);
            document.getElementById('deprecatedIcons').appendChild(deprecatedItem);
            deprecatedIconsCount++;
        }
        iconsCount++;
    });
    var whereDeprecated = function (icon) {
        return icon.deprecated === true;
    };
    if (!(icons.find(whereDeprecated))) {
        document.getElementById('deprecated').style.display = 'none';
    }
    document.getElementById('iconsCount').innerText = iconsCount;
    document.getElementById('newIconsCount').innerText = newIconsCount;
    document.getElementById('deprecatedIconsCount').innerText = deprecatedIconsCount;
    document.getElementById('npm').addEventListener('click', function () {
        copyText('npm install @mdi/font');
    });
})();
```

--------------------------------

### Basic CSS for Icons

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/tin-matching-recipients-sdk/TBS_TIN_MATCHING_RECIPIENTS_FRONTEND/src/styles/css/icons-mdi/preview.html

This CSS sets up basic styling for Material Design Icons, including margin, padding, and font styles. It's essential for displaying icons correctly.

```css
*{ margin: 0; padding: 0; }
body { margin: 0; padding: 0; background: #fff; color: #222; }
h1, h2, h3, p, div, blockquote, footer { font-family: "Helvetica Neue", Arial, sans-serif; }
```

--------------------------------

### Icon Display in Columns

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099NEC-sdk/TBS_FORM1099NEC_FRONTEND/src/styles/css/icons-mdi/preview.html

Demonstrates how icons are laid out in multiple columns for a compact view. Each icon is presented with its visual representation and code name.

```html
<div> <span><i class="mdi mdi-account-circle"></i><code class="mdi-code-json">mdi-account-circle</code></span> </div>
```

--------------------------------

### Basic CSS Reset and Styling

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099NEC-sdk/TBS_FORM1099NEC_FRONTEND/src/styles/css/icons-mdi/preview.html

Provides essential CSS for resetting default browser styles and setting up basic page appearance, including font styles and background colors.

```css
*{ margin: 0; padding: 0; }
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #222;
}
h1, h2, h3, p, div, blockquote, footer {
  font-family: "Helvetica Neue", Arial, sans-serif;
}
```

--------------------------------

### Icon with Name and Code

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Renders an icon alongside its class name in a `<code>` tag. This is helpful for users to easily copy the icon's class for implementation.

```HTML
<span>
    <i class="mdi"></i>
    <code></code>
</span>
```

--------------------------------

### Basic Icon

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099MISC-sdk/TBS_FORM1099MISC_FRONTEND/src/styles/css/icons-mdi/preview.html

Displays a standard Material Design Icon.

```html
<i class="mdi mdi-icon-name"></i>
```

--------------------------------

### Popper.js Callbacks (onCreate, onUpdate)

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/js/README.md

Utilize onCreate and onUpdate callbacks to execute custom logic after popper initialization or updates. The callback receives computed data for styling.

```javascript
const reference = document.querySelector('.my-button');
const popper = document.querySelector('.my-popper');
new Popper(reference, popper, {
    onCreate: (data) => {
        // data is an object containing all the informations computed
        // by Popper.js and used to style the popper and its arrow
        // The complete description is available in Popper.js documentation
    },
    onUpdate: (data) => {
        // same as `onCreate` but called on subsequent updates
    }
});
```

--------------------------------

### CSS for Icon Styling

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Provides essential CSS rules for styling Material Design Icons, including basic resets and specific icon properties.

```CSS
i.mdi {
    display: inline-block;
    width: 32px;
    height: 24px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    line-height: 24px;
}

i.mdi::before {
    font-size: 24px;
}
```

--------------------------------

### CSS for Footer Styling

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Basic styling for the page footer, including padding, color, and border.

```CSS
footer {
    display: flex;
    padding: 20px;
    color: #666;
    border-top: 1px solid #DDD;
    background: #F1F1F1;
}
```

--------------------------------

### Header Styling with Version and Code

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/tin-matching-recipients-sdk/TBS_TIN_MATCHING_RECIPIENTS_FRONTEND/src/styles/css/icons-mdi/preview.html

Styles the main header of the page, including the title, version number, and a code element that likely represents a version identifier or copyable code.

```css
h1 { padding: 20px 20px 16px 20px; font-size: 26px; line-height: 26px; font-weight: normal; color: #FFF; background-color: #2196F3; }
h1 svg { vertical-align: middle; width: 26px; height: 26px; margin: 0 6px 4px 0; }
h1 svg path { fill: #FFF; }
h1 .version { font-size: 14px; background: #FFF; padding: 4px 10px; float: right; border-radius: 2px; margin: -3px 0 0 0; color: #666; font-weight: bold; }
h1 .version::before { content: 'v'; }
h1 code { font-size: 20px; background: rgba(0, 0, 0, 0.5); padding: 4px 12px; border-radius: 3px; float: right; margin: -3px 10px 0 0; border: 1px solid transparent; cursor: pointer; }
h1 code:hover { border: 1px solid #FFF; }
h1 code svg { width: 24px; height: 24px; margin: -1px -4px 0 -2px }
```

--------------------------------

### Icon with Custom Class

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/business-sdk/TBS_BUSINESS_FRONTEND/src/styles/css/icons-mdi/preview.html

Shows an icon with an additional class for specific styling, like a dark background. Useful for demonstrating icons in different contexts.

```HTML
<i class="mdi dark-demo"></i>
```

--------------------------------

### Initialize Icons Display

Source: https://github.com/taxbandits/tbs-nodejs-sdk/blob/main/form1099K-sdk/TBS_FORM1099K_FRONTEND/src/styles/css/icons-mdi/preview.html

This JavaScript code initializes the display of Material Design Icons on the page. It iterates through a list of icons, categorizes them into new and deprecated, and appends them to their respective sections.

```javascript
var icons = JSON.parse('[
 {
  "name": "blank", "hex": "f68c"
 }');

icons.forEach(function (icon) {
 var item = getIconItem(icon, isNew(icon), isDeprecated(icon));
 document.getElementById('icons').appendChild(item);

 if (isNew(icon)) {
 var newItem = getIconItem(icon, false, false);
 document.getElementById('newIcons').appendChild(newItem);
 newIconsCount++;
 }

 if (isDeprecated(icon)) {
 var deprecatedItem = getIconItem(icon, false, false);
 document.getElementById('deprecatedIcons').appendChild(deprecatedItem);
 deprecatedIconsCount++;
 }

 iconsCount++;
});

var whereDeprecated = function (icon) {
 return icon.deprecated === true;
};

if (!(icons.find(whereDeprecated))) {
 document.getElementById('deprecated').style.display = 'none';
}

document.getElementById('iconsCount').innerText = iconsCount;
document.getElementById('newIconsCount').innerText = newIconsCount;
document.getElementById('deprecatedIconsCount').innerText = deprecatedIconsCount;

document.getElementById('npm').addEventListener('click', function () {
 copyText('npm install @mdi/font');
});
})();
```