title: Adding images on button click along with the change of theme
body: <p>I am a new bie to the world of angular so rite now I have developed the below program to load the themes dynamically as shown below</p>
  
  <p><strong>my-scss-file.scss</strong> :</p>
  
  <pre><code>@import '~@angular/material/core/theming/all-theme';
  
  @include md-core();
  
  $primary: md-palette($md-deep-purple);
  $accent: md-palette($md-amber);
  
  $theme: md-light-theme($primary, $accent);
  
  @include angular-material-theme($theme);
  
  .dark-theme {
    $dark-p: md-palette($md-deep-purple, 700);
    $dark-a: md-palette($md-amber);
  
    $dark-t: md-dark-theme($dark-p, $dark-a);
  
    @include angular-material-theme($dark-t);
  }
  </code></pre>
  
  <p><strong>my-html-file.html</strong> :</p>
  
  <pre><code>&lt;div [class.dark-theme]="isDarkTheme"&gt;
  &lt;button (click)="toggleTheme()"&gt;Toggle theme&lt;/button&gt;
  </code></pre>
  
  <p><strong>my-ts-file.ts</strong> :</p>
  
  <pre><code>@Component({
    selector: 'your-component-selector',
    templateUrl: './my-html-file.html',
    styleUrls: ['my-scss-file.scss']
  })
  export class YourComponent implements {
    // by default, if you do not want the dark theme
    private isDarkTheme = false;
  
    constructor() { }
  
    toggleTheme() {
      this.isDarkTheme = !this.isDarkTheme;
    }
  }
  </code></pre>
  
  <p>now the output is like as shown below 
  <a href="https://i.stack.imgur.com/4WAGF.png" rel="nofollow noreferrer">output of the above angular app</a></p>
  
  <p>now my query is that along with these button i want to add images as shown below that will be shown along with button click</p>
  
  <p><a href="https://i.stack.imgur.com/BRU2M.png" rel="nofollow noreferrer">how the tentative image should be there</a></p>
  
  <p>so for that i have added images folder in my project in which i have kept images now please advise where should i add the images url in my .scss file to achieve this </p>
  
  <p>Images folder location in my workspace 
  <a href="https://i.stack.imgur.com/cWhJ9.png" rel="nofollow noreferrer">images folder location in my workspace</a></p>
  
  <p>below is my .angular-cli.json file contents </p>
  
  <pre><code>{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
      "name": "dynamic-material-theming"
    },
    "apps": [
      {
        "root": "src",
        "outDir": "dist",
        "assets": [
          "assets",
          "favicon.ico"
        ],
        "index": "index.html",
        "main": "main.ts",
        "polyfills": "polyfills.ts",
        "test": "test.ts",
        "tsconfig": "tsconfig.app.json",
        "testTsconfig": "tsconfig.spec.json",
        "prefix": "app",
        "styles": [
          "styles.css",
          "theme.scss"
        ],
        "scripts": [],
        "environmentSource": "environments/environment.ts",
        "environments": {
          "dev": "environments/environment.ts",
          "prod": "environments/environment.prod.ts"
        }
      }
    ],
    "e2e": {
      "protractor": {
        "config": "./protractor.conf.js"
      }
    },
    "lint": [
      {
        "project": "src/tsconfig.app.json"
      },
      {
        "project": "src/tsconfig.spec.json"
      },
      {
        "project": "e2e/tsconfig.e2e.json"
      }
    ],
    "test": {
      "karma": {
        "config": "./karma.conf.js"
      }
    },
    "defaults": {
      "styleExt": "css",
      "component": {}
    }
  }
  </code></pre>