feat(material/slide-toggle): enabling custom icons through directives

[uptyler]

Reasoning:

The M3 specification does not clarify which icons are acceptable to be used within the thumb of the mat-slide-toggle component. Therefore, it would be a benefit to allow developers to customize the thumb icon.

Changes

New Directives

Introduces 4 directives: matCheckedIcon, matUncheckedIcon, matCheckedDisabledIcon, and matUncheckedDisabledIcon These, used in conjuction with <mat-icon>s or svgs will enable custom icons to be injected into the thumb of the slide-toggle as per the m3 spec.

   <!-- Implementation -->
  <mat-slide-toggle>
    <mat-icon matCheckedIcon>light_mode</mat-icon>
    <mat-icon matUncheckedIcon>dark_mode</mat-icon>
    <mat-icon matCheckedDisabledIcon>lock</mat-icon>
    <mat-icon matUncheckedDisabledIcon>lock_open</mat-icon>
    Custom Icons
  </mat-slide-toggle>

Reworked hideIcon Directive

Reworks hideIcon directive to enable hiding icons based off 4 strings: "both", "checked", "unchecked", and "none". Casts true and false to "both" and "none" respectively. Casts undefined to "none" and "" to "both".

  <!-- Implementation -->
  <mat-slide-toggle hideIcon="unchecked">No icon (While Unchecked)</mat-slide-toggle>
  <mat-slide-toggle hideIcon="checked">No icon (While Checked)</mat-slide-toggle>
  <mat-slide-toggle hideIcon>No icon</mat-slide-toggle>

Reference: M3 Spec

Implements #28977

[google-cla[bot]]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.