Merge pull request #2087 from dxc-technology/jialecl-iconExample

Iconography example changed

Author: kukoc

apps/website/screens/principles/iconography/examples/buttonsWithIcon.ts

@@ -8,19 +8,14 @@ const code = `() => {
         <DxcButton icon="filled_delete" mode="secondary" label="Delete" />
         <DxcButton
           icon={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              fill="currentColor"
-              class="bi bi-instagram"
-              viewBox="0 0 16 16"
-            >
-              <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M19.2211 5.08325C15.4006 1.09483 9.07054 0.957626 5.08282 4.77818C1.09433 8.59937 0.957865 14.9292 4.77918 18.9182C8.59897 22.9066 14.9298 23.0408 18.9175 19.2211C22.9067 15.4006 23.0408 9.0715 19.2219 5.08235L19.2211 5.08325ZM18.1891 15.6316C17.3879 17.0377 18.1416 17.9922 18.5234 18.5274C18.5227 18.5274 18.5211 18.5258 18.5196 18.5251L18.4905 18.4959L18.5142 18.5312C18.5149 18.5323 18.5157 18.5333 18.5165 18.5343C17.9775 18.1494 17.0665 17.4264 15.5922 18.2115C12.8459 19.8015 9.27221 19.4221 6.92446 17.0715C4.12518 14.2685 4.12671 9.72574 6.9283 6.92576C9.73364 4.12484 14.275 4.12718 17.0743 6.92949C19.4335 9.29013 19.8031 12.8837 18.1891 15.6316Z" fill="currentColor"/>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.446 8.5893C12.524 8.58931 13.558 9.01757 14.3203 9.77988C15.0826 10.5422 15.5108 11.5761 15.5108 12.6542V16.719H13.7447V12.6542C13.7447 12.1994 13.6099 11.7548 13.3572 11.3766C13.1045 10.9985 12.7454 10.7037 12.3252 10.5297C11.905 10.3556 11.4427 10.3101 10.9966 10.3988C10.5505 10.4876 10.1408 10.7066 9.81922 11.0282C9.49763 11.3497 9.27862 11.7595 9.18989 12.2055C9.10116 12.6516 9.1467 13.114 9.32075 13.5341C9.49479 13.9543 9.78953 14.3135 10.1677 14.5661C10.5458 14.8188 10.9904 14.9537 11.4452 14.9537H12.9593V16.719H11.4452C10.3672 16.719 9.33324 16.2907 8.57093 15.5284C7.80862 14.7661 7.38036 13.7322 7.38036 12.6542C7.38036 11.5761 7.80862 10.5422 8.57093 9.77987C9.33324 9.01756 10.3672 8.5893 11.4452 8.5893H11.446Z" fill="currentColor"/>
+              <path d="M14.3288 8.34203L13.0948 7.82563L14.3288 7.30896L14.8451 6.07509L15.3618 7.30903L16.5958 7.82569L15.3619 8.34203L14.8452 9.57607L14.3288 8.34203Z" fill="currentColor"/>
             </svg>
           }
-          mode="tertiary"
-          title="Instagram social media"
+          mode="secondary"
+          title="Assure answers"
         />
       </DxcFlex>
     </DxcInset>