Update icon guidelines

Bypass-Check-License: Only updating files, no new files are added.
Bug: 414330824
Change-Id: Id4a26bff8390ef0505294aae5861fdcefa42bdd1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6874551
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>

Author: Kateryna Prokopenko

docs/styleguide/ux/components.md

@@ -274,11 +274,14 @@ Find an exhaustive collection of icons currently used in DevTools [here](https:/
 
 #### Developer guidelines
 
+For some frequently used icons e.g. cross-circle, warning-filled etc. colors are auto-set in the component. See full list [here](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/icon_button/icon.css;l=47)
+
 ##### Dos and Don'ts
 
 ###### Do
 
-  * Set class and change color and / or size in .css files
+  * Set class and change color in .css files
+  * Set one of the predefined classes to change icon size e.g. extra-small for 12px
 
 ###### Don't
 

front_end/ui/components/docs/icon_component/basic.html

@@ -21,10 +21,8 @@
           height: 50px;
         }
 
-        .custom-size-and-color {
+        .custom-color {
           color: blue;
-          width: 14px;
-          height: 14px;
         }
     </style>
   </head>

front_end/ui/components/docs/icon_component/basic.ts

@@ -60,7 +60,7 @@ row4.appendChild(iconDescription4);
 const icon4 = document.createElement('td');
 Lit.render(
     html`
-        <devtools-icon name="select-element" class="custom-size-and-color"></devtools-icon>
+        <devtools-icon name="select-element" class="custom-color small"></devtools-icon>
       `,
     icon4);
 row4.appendChild(icon4);