[Docs] [Material] Fix Icons api docs (#66508)

* [Docs] [Icons] Updating dart doc styles to recognize more styles of icons. All the 4 icon styles we support have to be pulled from 4 individual web fonts when we show the html page for api docs.

* Better documentation and that special awful case.

* Couple more places to remove.

dev/docs/assets/overrides.css

@@ -121,8 +121,7 @@ dl.dl-horizontal dt {
 }
 
 /* Line the material icons up with their labels */
-i.material-icons.md-36,
+i.md-36 {
-i.material-icons.md-48 {
   vertical-align: bottom;
 }
 

dev/docs/styles.html

@@ -1,25 +1,13 @@
 <!-- style overrides for dartdoc -->
 <style>
 @import 'https://fonts.googleapis.com/css?family=Roboto:500,400italic,300,400,100i';
-@import 'https://fonts.googleapis.com/css?family=Material+Icons';
+@import 'https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round';
 </style>
 
 <link href="../assets/overrides.css" rel="stylesheet" type="text/css">
 
-<!-- The following rules are from http://google.github.io/material-design-icons/ -->
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round" rel="stylesheet">
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <style>
-  /* Rules for sizing the icon. */
+  /* Rule for sizing the icon. */
-  .material-icons.md-18 { font-size: 18px; }
+  .md-36 { font-size: 36px; }
-  .material-icons.md-24 { font-size: 24px; }
-  .material-icons.md-36 { font-size: 36px; }
-  .material-icons.md-48 { font-size: 48px; }
-
-  /* Rules for using icons as black on a light background. */
-  .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
-  .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
-
-  /* Rules for using icons as white on a dark background. */
-  .material-icons.md-light { color: rgba(255, 255, 255, 1); }
-  .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
 </style>

dev/tools/update_icons.dart

@@ -263,14 +263,40 @@ void _testIsMapSuperset(Map<String, String> newCodepoints, Map<String, String> o
 }
 
 String _generateDeclaration(MapEntry<String, String> tokenPair) {
-  final String identifier = _generateIdentifier(tokenPair.key);
   final String description = tokenPair.key.replaceAll('_', ' ');
+
+  String styleSuffix = '';
+  String webFontKey = tokenPair.key;
+
+  // The first line of each generated declaration includes a comment of html.
+  // DartDocs reads that to make the listings in our api docs that shows the
+  // icon rendered next to its key name. Unfortunately, unlike Flutter, this
+  // html needs to use a different web font for each style. We read the style's
+  // suffix from the key for Flutter's icons font, add the corresponding style's
+  // suffix to the class we pass into html, and then remove the suffix from the
+  // icon key. The keys needed for the individual web fonts do not use a suffix
+  // to denote style.
+  if (webFontKey.endsWith('_outlined') && webFontKey!='insert_chart_outlined') {
+    styleSuffix = '-outlined';
+    webFontKey = webFontKey.replaceAll('_outlined', '');
+  }
+  if (webFontKey.endsWith('_rounded')) {
+    styleSuffix = '-round';
+    webFontKey = webFontKey.replaceAll('_rounded', '');
+  }
+  if (webFontKey.endsWith('_sharp')) {
+    styleSuffix = '-sharp';
+    webFontKey = webFontKey.replaceAll('_sharp', '');
+  }
+
+  final String identifier = _generateIdentifier(tokenPair.key);
   final String rtl = _mirroredIcons.contains(tokenPair.key)
       ? ', matchTextDirection: true'
       : '';
+
   return '''
 
-  /// <i class="material-icons md-36">${tokenPair.key}</i> &#x2014; material icon named "$description".
+  /// <i class="material-icons$styleSuffix md-36">$webFontKey</i> &#x2014; material icon named "$description".
   static const IconData $identifier = IconData(0x${tokenPair.value}, fontFamily: 'MaterialIcons'$rtl);
 ''';
 }