title: How to modify mat-form-field outline?
body: <p>I have a stepper form which will allow the user to edit the details from the previously saved data. The form-field must show a warning upon loading of the form when the previous data is invalid. The warning text is displaying but the outline is not. The outline should be color yellow, the same with the warning text. The yellow outline is only working when the user starts to edit the form, but it should display upon loading.
  Here is the code:</p>
  <pre><code>&lt;mat-form-field
                  appearance=&quot;outline&quot;
                  class=&quot;width-1&quot;
                  [ngClass]=&quot;{
                    'mat-form-field-invalid warning': deptAeroWarning
                  }&quot;
                &gt;
                  &lt;mat-label&gt;Departure Aerodrome (ICAO)&lt;/mat-label&gt;
                  &lt;input
                    maxlength=&quot;4&quot;
                    matInput
                    name=&quot;departureAerodrome&quot;
                    id=&quot;departureAerodrome&quot;
                    formControlName=&quot;departureAerodrome&quot;
                    placeholder=&quot;Departure Aerodrome (ICAO)&quot;
                    (input)=&quot;inputDeptAero(departure.value)&quot;
                    #departure
                    required
                  /&gt;
                  &lt;mat-error *ngIf=&quot;!deptAeroWarning&quot;
                    &gt;Error! The ICAO code is not correct. The length should be
                    4 characters.&lt;/mat-error
                  &gt;
                  &lt;mat-hint class=&quot;warning&quot; *ngIf=&quot;deptAeroWarning&quot;&gt;{{
                    icaoWarningMsg
                  }}&lt;/mat-hint&gt;
                &lt;/mat-form-field&gt;
  </code></pre>
  <p>Here is the css code for the warning text:</p>
  <pre><code>::ng-deep .mat-hint.warning {
    color: #fbbb21;
  }
  </code></pre>
  <p>Here is the code for the outline:</p>
  <pre><code>::ng-deep
    .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field.mat-form-field-invalid.warning
    .mat-form-field-outline-thick {
    color: #fbbb21 !important;
    opacity: 0.8 !important;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/eCJfP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eCJfP.png" alt="Here is the screenshot of the current situation" /></a>
  <a href="https://i.stack.imgur.com/iZOVT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iZOVT.png" alt="But, it should be like this upon loading of the form" /></a></p>