diff --git a/src/components-examples/material/icon/icon-harness/icon-harness-example.ts b/src/components-examples/material/icon/icon-harness/icon-harness-example.ts
index 10a8115b6976..896f99df309d 100644
--- a/src/components-examples/material/icon/icon-harness/icon-harness-example.ts
+++ b/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 {}
diff --git a/src/components-examples/material/icon/icon-overview/icon-overview-example.ts b/src/components-examples/material/icon/icon-overview/icon-overview-example.ts
index dd7b1c841e1d..e039b2508947 100644
--- a/src/components-examples/material/icon/icon-overview/icon-overview-example.ts
+++ b/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 {}
diff --git a/src/components-examples/material/icon/icon-svg/icon-svg-example.ts b/src/components-examples/material/icon/icon-svg/icon-svg-example.ts
index ed7e475a429c..e278cbc50b1c 100644
--- a/src/components-examples/material/icon/icon-svg/icon-svg-example.ts
+++ b/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) {
diff --git a/src/material/icon/icon.md b/src/material/icon/icon.md
index 9ac9a4662d1d..dce16b18779f 100644
--- a/src/material/icon/icon.md
+++ b/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
diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts
index caddabf92131..4e5408b758d9 100644
--- a/src/material/icon/icon.ts
+++ b/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;