{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/icon","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"cf06f372-993b-5651-8934-03dec119a638","title":"Icon","slug":"/contrast/angular/components/icon"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Icon\",\n  \"metaTitle\": \"Icon Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Icon is an element which is used for dismissing components like modals and alerts\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Icon\"), mdx(\"p\", null, \"Angular Bootstrap Icon is an element which is used for dismissing components like modals and alerts. See how easy implementation is.\"), mdx(\"i\", null), mdx(\"h2\", null, \"Examples\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/9d82864f2af0b01cef63f617de687c68/20751/icon1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"10.424710424710423%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAp0lEQVQI1wXBTQvBAACAYT+Q/APEzUk5jYOTplx2ICXJgYtSTKJoKKnlay1xsFqJksmmJiN6PY/v6nwpDV5IPY+t6bEYneg2DAzNpm3OSc9qVA5T3I2KLaZwizmOuoaYzyMIApq2grfK5y7zdVV8R+tDsuoQLzvMdJd+fU8pu2StXCjoHYKtDOllk7vS5xwOcktE2E0UQtEYfn+AyXjI79HBNiWelswfOQZ/S09pH2EAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/9d82864f2af0b01cef63f617de687c68/e3189/icon1.png\",\n    \"srcSet\": [\"/static/9d82864f2af0b01cef63f617de687c68/a2ead/icon1.png 259w\", \"/static/9d82864f2af0b01cef63f617de687c68/6b9fd/icon1.png 518w\", \"/static/9d82864f2af0b01cef63f617de687c68/e3189/icon1.png 1035w\", \"/static/9d82864f2af0b01cef63f617de687c68/20751/icon1.png 1037w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"Default Icon example.\"), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBBtn color=\\\"primary\\\">\\n    <CDBIcon [fab]=true icon=\\\"stack-overflow\\\"></CDBIcon>\\n    click me\\n</CDBBtn>\\n<CDBBtn color=\\\"secondary\\\">\\n    <CDBIcon [fab]=true icon=\\\"facebook\\\"></CDBIcon>\\n    click me\\n</CDBBtn>\\n<CDBBtn color=\\\"success\\\">\\n    <CDBIcon [fab]=true icon=\\\"reddit\\\"></CDBIcon>\\n    click me\\n</CDBBtn>\\n<CDBBtn color=\\\"danger\\\">\\n    <CDBIcon [fab]=true icon=\\\"twitter\\\"></CDBIcon>\\n    click me\\n</CDBBtn>\\n<CDBBtn color=\\\"dark\\\">\\n    <CDBIcon [fab]=true icon=\\\"instagram\\\"></CDBIcon>\\n    click me\\n</CDBBtn>\\n<CDBBtn color=\\\"warning\\\">\\n    <CDBIcon [fab]=true icon=\\\"google\\\"></CDBIcon>\\n    click me\\n</CDBBtn>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Border Icons\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"427px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/70b964d7adf88885133ee8de72cbf0ba/a7c74/icon2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"17.760617760617762%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAAjklEQVQY042QywrCMBBF8/8/JWJ2RoQaIqgbrcaYNLbYurBkcpXYFt1lVgfOXObB8FMxxomJCHku/jkWQoDWV4ShiXMObWziylnM5guM/UWxQXm+JG7bB3b7w+SU2sLXDVjfv3A8lZ+pXyOEgK184vrusVytQUNKSglzc4mfXZdy43ZKKRjrwHJPpsx3vAFOhDZER32b+gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/70b964d7adf88885133ee8de72cbf0ba/a7c74/icon2.png\",\n    \"srcSet\": [\"/static/70b964d7adf88885133ee8de72cbf0ba/a2ead/icon2.png 259w\", \"/static/70b964d7adf88885133ee8de72cbf0ba/a7c74/icon2.png 427w\"],\n    \"sizes\": \"(max-width: 427px) 100vw, 427px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon [fab]=true [border]=true icon=\\\"stack-overflow\\\"></CDBIcon>\\n<CDBIcon [fab]=true [border]=true icon=\\\"facebook\\\"></CDBIcon>\\n<CDBIcon [fab]=true [border]=true icon=\\\"reddit\\\"></CDBIcon>\\n<CDBIcon [fab]=true [border]=true icon=\\\"twitter\\\"></CDBIcon>\\n<CDBIcon [fab]=true [border]=true icon=\\\"instagram\\\"></CDBIcon>\\n<CDBIcon [fab]=true [border]=true icon=\\\"google\\\"></CDBIcon>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Spin Icons\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/4276eae6da85b4c7d3cd766c55915268/spinicon.gif\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon [fab]=true [spin]=true icon=\\\"stack-overflow\\\"></CDBIcon>\\n<CDBIcon [fab]=true [spin]=true icon=\\\"facebook\\\"></CDBIcon>\\n<CDBIcon [fab]=true [spin]=true icon=\\\"reddit\\\"></CDBIcon>\\n<CDBIcon [fab]=true [spin]=true icon=\\\"twitter\\\"></CDBIcon>\\n<CDBIcon [fab]=true [spin]=true icon=\\\"instagram\\\"></CDBIcon>\\n<CDBIcon [fab]=true [spin]=true icon=\\\"google\\\"></CDBIcon>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Pull Icons\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"137px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/81255ae3c99491c8a65477f216b1a5bf/2018e/icon4.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"52.55474452554745%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABJ0AAASdAHeZh94AAAAcElEQVQoz2P4T2XAgE/y379/cBqMIZz/UGHKDPz79y8Kn2QDUVyHRZwiF/79/eP/hYuX///685cyF/6Fajxz/ND/hpau/19//6fcy3++ffy/avXq/0uWrfn/lSIXIhmMjMk2EJdGsiMFIw1Sw4XkAAD0H2dkm2/ccQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/81255ae3c99491c8a65477f216b1a5bf/2018e/icon4.png\",\n    \"srcSet\": [\"/static/81255ae3c99491c8a65477f216b1a5bf/2018e/icon4.png 137w\"],\n    \"sizes\": \"(max-width: 137px) 100vw, 137px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon [fab]=true pull=\\\"left\\\" icon=\\\"stack-overflow\\\"></CDBIcon>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Pulse Icons\"), mdx(\"p\", null, mdx(\"img\", _extends({\n    parentName: \"p\"\n  }, {\n    \"src\": \"/f4c52f080c3c1182d3445bacb359be6b/pulseicon.gif\",\n    \"alt\": \"image info\"\n  }))), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon [fab]=true [pulse]=true icon=\\\"stack-overflow\\\"></CDBIcon>\\n<CDBIcon [fab]=true [pulse]=true icon=\\\"facebook\\\"></CDBIcon>\\n<CDBIcon [fab]=true [pulse]=true icon=\\\"reddit\\\"></CDBIcon>\\n<CDBIcon [fab]=true [pulse]=true icon=\\\"twitter\\\"></CDBIcon>\\n<CDBIcon [fab]=true [pulse]=true icon=\\\"instagram\\\"></CDBIcon>\\n<CDBIcon [fab]=true [pulse]=true icon=\\\"google\\\"></CDBIcon>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Flip Icons\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"195px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ec2fdec410ba7094fe2b69493298c335/cb9a0/icon6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"35.8974358974359%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAABJ0AAASdAHeZh94AAAAl0lEQVQoz2P4DwX//v2D02AM4cD5MLm/f/+i8NEBAzIHWQG6JlTN/7AahmIgTMGf37/+f/j4Cathnz68///oybP///AYimHgj+9f/y+Yv+D/q7cfUbwJAhN6Ov6nZBb+f/DkBZgPE8drIEjR1SuX/7968w7DwFMnjv5fsWbD/1+//5IehrjCFBcfpwuxxSSy6//8+YM3lgEBJCVn36YafwAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/ec2fdec410ba7094fe2b69493298c335/cb9a0/icon6.png\",\n    \"srcSet\": [\"/static/ec2fdec410ba7094fe2b69493298c335/cb9a0/icon6.png 195w\"],\n    \"sizes\": \"(max-width: 195px) 100vw, 195px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon [fab]=true flip=\\\"horizontal\\\" icon=\\\"stack-overflow\\\"></CDBIcon>\\n<CDBIcon [fab]=true flip=\\\"vertical\\\" icon=\\\"facebook\\\"></CDBIcon>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Rotate Icons\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"217px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/204a8e2e35053e1cf3d920eb93365553/7ba77/icon7.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"31.336405529953915%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABJ0AAASdAHeZh94AAAAc0lEQVQY02P4jwb+/fsHp5HZ+GhkwIDNsL9//2K1AJtavAbCDLp768b/jVt3/P/9F6Lpz58/YPrsyWP/6xqb/z958RainlgXvn/39v+58xf///j5C8OiGbPn/v/45RtxXsbnNbK8jKwZ5CpskfAHizgyAABsgtd3W2iNeAAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/204a8e2e35053e1cf3d920eb93365553/7ba77/icon7.png\",\n    \"srcSet\": [\"/static/204a8e2e35053e1cf3d920eb93365553/7ba77/icon7.png 217w\"],\n    \"sizes\": \"(max-width: 217px) 100vw, 217px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon [fab]=true rotate=\\\"90\\\" icon=\\\"stack-overflow\\\"></CDBIcon>\\n<CDBIcon [fab]=true rotate=\\\"180\\\" icon=\\\"facebook\\\"></CDBIcon>\\n\")), mdx(\"i\", null), mdx(\"h2\", null, \"Sizes\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"607px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ba1edf86a9b74cb36473347e4c1a95c6/ef9e5/icon8.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"17.760617760617762%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAA40lEQVQY02P4DwX//qOCX79+/v/69Sucf+nSpf/7Dx6G8588efy/uLT8/+x5C////v0HYsa/f/8ZLly8+P/Bw0dggUmTp/4/e/4imF3f0Pg/NSPn//uPn/6/ff3yv39Q6P/ktMz/q9ZtBMvHJyT+T88p+J+alv5/4bJVYLE/f/78Z3j46NH/16/fgAUOHDwEN3zFylX/J06Z/v/jp8//P7x7+7+qtv5/Y3Pr/2279oLlS0rL/rd29PyPAxq8YcsOhIFwL/9DeBqZDQOfPn2CWwwCHz98+L9n777/J06ehgcXSB8AyVgYy9vxr48AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/ba1edf86a9b74cb36473347e4c1a95c6/ef9e5/icon8.png\",\n    \"srcSet\": [\"/static/ba1edf86a9b74cb36473347e4c1a95c6/a2ead/icon8.png 259w\", \"/static/ba1edf86a9b74cb36473347e4c1a95c6/6b9fd/icon8.png 518w\", \"/static/ba1edf86a9b74cb36473347e4c1a95c6/ef9e5/icon8.png 607w\"],\n    \"sizes\": \"(max-width: 607px) 100vw, 607px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBIcon icon=\\\"facebook\\\" [fab]=true size=\\\"lg\\\"></CDBIcon>\\n<CDBIcon [fab]=true icon=\\\"facebook\\\" size=\\\"2x\\\"></CDBIcon>\\n<CDBIcon [fab]=true icon=\\\"facebook\\\" size=\\\"3x\\\"></CDBIcon>\\n<CDBIcon [fab]=true icon=\\\"facebook\\\" size=\\\"4x\\\"></CDBIcon>\\n<CDBIcon [fab]=true icon=\\\"facebook\\\" size=\\\"5x\\\"></CDBIcon>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Icon Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {IconModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Icon Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Icon component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"Required!\"), \" The Font Awesome icon name, which you want to use\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"facebook\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"border\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds border around icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"border=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"brand\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets brand icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: fab\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[brand]\", \"=true icon=\\\"chevron\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fab\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets brand icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: brand\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[fab]\", \"=true icon=\\\"twitter\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fal\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets light icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: light\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[fal]\", \"=true icon=\\\"user\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"far\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets light icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: regular\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[far]\", \"=true icon=\\\"user\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"fixed\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets fixed with of icons (i.e. inside list)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"fixed=true icon=\\\"user\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"flip\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Flips icon; acceptable props: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"flip=\\\"vertical\\\" icon=\\\"user\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"inverse\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets alternative icon color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"inverse=true icon=\\\"user\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"light\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets light icon category; \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"alias: fal\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"light=true icon=\\\"facebook\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"list\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fa-li\"), \" to the className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"list=true icon=\\\"facebook\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"pull\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Pulls icon to the \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"pull=\\\"left\\\" icon=\\\"user\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"pulse\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Rotates icon in 8 steps\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"pulse=true icon=\\\"facebook\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"rotate\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Rotates icon by \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"90\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"180\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"270\"), \" degrees\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"rotate=\\\"90\\\" icon=\\\"facebook\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Increase icon size; accepts parameters: \", \"[\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lg\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"2x\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"3x\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"4x\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"5x\"), \"]\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"size=\\\"5x\\\" icon=\\\"facebook\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"spin\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Spins the icon, you can combine this prop with \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pulse\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"[spin]\", \"=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"stack\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Use class \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fa-stack\"), \" on wrapper to stack multiple icons; use \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"1x\"), \" for regular sized icon and \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"2x\"), \" for larger one\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"fa-stack\\\"... \", \"[far]\", \"=true icon=\\\"square\\\" stack=\\\"2x\\\" ... \", \"[fab]\", \"=true icon=\\\"twitter\\\" stack=\\\"1x\\\"\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#icon","title":"Icon","items":[{"url":"#examples","title":"Examples","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#border-icons","title":"Border Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#spin-icons","title":"Spin Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#pull-icons","title":"Pull Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#pulse-icons","title":"Pulse Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#flip-icons","title":"Flip Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#rotate-icons","title":"Rotate Icons","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]},{"url":"#sizes","title":"Sizes","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-icon-bootstrap-modules-used","title":"Contrast Icon Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/icon.md"},"frontmatter":{"metaTitle":"Icon Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Icon is an element which is used for dismissing components like modals and alerts"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"cf06f372-993b-5651-8934-03dec119a638"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}