docs(material/icon): Update docs and examples (#29260)

Author: amysorto

src/components-examples/material/icon/icon-harness/icon-harness-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 
 /**
@@ -9,5 +9,6 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'icon-harness-example.html',
   standalone: true,
   imports: [MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconHarnessExample {}

src/components-examples/material/icon/icon-overview/icon-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 
 /**
@@ -9,5 +9,6 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: 'icon-overview-example.html',
   standalone: true,
   imports: [MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconOverviewExample {}

src/components-examples/material/icon/icon-svg/icon-svg-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 import {MatIconRegistry, MatIconModule} from '@angular/material/icon';
 
@@ -20,6 +20,7 @@ const THUMBUP_ICON =
   templateUrl: 'icon-svg-example.html',
   standalone: true,
   imports: [MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class IconSvgExample {
   constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {

src/material/icon/icon.md

@@ -20,8 +20,8 @@ By default, `<mat-icon>` expects the
 [Material icons font](https://google.github.io/material-design-icons/#icon-font-for-the-web).
 (You will still need to include the HTML to load the font and its CSS, as described in the link).
 
-You can specify a different font, such as Material's latest icons, 
-[Material Symbols](https://fonts.google.com/icons), by setting the `fontSet` input to either the 
+You can specify a different font, such as Material's latest icons,
+[Material Symbols](https://fonts.google.com/icons), by setting the `fontSet` input to either the
 CSS class to apply to use the desired font, or to an alias previously registered with
 `MatIconRegistry.registerFontClassAlias`. Alternatively you can set the default for all
 your application's icons using `MatIconRegistry.setDefaultFontSetClass`.
@@ -83,12 +83,6 @@ as for individually registered icons.
 Multiple icon sets can be registered in the same namespace. Requesting an icon whose id appears in
 more than one icon set, the icon from the most recently registered set will be used.
 
-### Theming
-
-By default, icons will use the current font color (`currentColor`). this color can be changed to
-match the current theme's colors using the `color` attribute. This can be changed to
-`'primary'`, `'accent'`, or `'warn'`.
-
 ### Accessibility
 
 Similar to an `<img>` element, an icon alone does not convey any useful information for a

src/material/icon/icon.ts

@@ -32,7 +32,13 @@ import {MatIconRegistry} from './icon-registry';
 
 /** Default options for `mat-icon`.  */
 export interface MatIconDefaultOptions {
-  /** Default color of the icon. */
+  /**
+   * Theme color of the icon. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   color?: ThemePalette;
   /** Font set that the icon is a part of. */
   fontSet?: string;
@@ -150,7 +156,13 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
 export class MatIcon implements OnInit, AfterViewChecked, OnDestroy {
   private _defaultColor: ThemePalette;
 
-  /** Theme palette color of the icon. */
+  /**
+   * Theme color of the icon. This API is supported in M2 themes only, it
+   * has no effect in M3 themes.
+   *
+   * For information on applying color variants in M3, see
+   * https://material.angular.io/guide/theming#using-component-color-variants.
+   */
   @Input()
   get color() {
     return this._color || this._defaultColor;