docs(datepicker): add information about datepicker icon (#3402)

Fixes #3306

demo/src/app/components/datepicker/demos/popup/datepicker-popup.html

@@ -12,3 +12,9 @@
 
 <hr/>
 <pre>Model: {{ model | json }}</pre>
+
+<ngb-alert class="mt-3 mb-0" type="info" [dismissible]="false">
+  You must provide the icon for the button. This allows you
+  to choose an icon that matches your application's style.
+  In this example, the icon is set via a CSS class.
+</ngb-alert>

demo/src/app/components/datepicker/overview/datepicker-overview.component.html

@@ -67,6 +67,13 @@ <h4>Handling the popup</h4>
     a date is selected via keyboard or mouse.
     It can stay open after date selection if you set <code>[autoClose]</code> input to <code>false</code>
   </p>
+
+  <p>
+    When using a button (or any other element) to open the popup, the styling and content of the button
+    is left up to you. In the example above, the button is simply given the text "Toggle", but you
+    could also use an icon, or even group the <code>input</code> and <code>button</code> with an
+    <a href="https://getbootstrap.com/docs/{{ bootstrapVersion }}/components/input-group/#button-addons">input group</a>.
+  </p>
 </ngbd-overview-section>
 
 

demo/src/app/components/datepicker/overview/datepicker-overview.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { environment } from '../../../../environments/environment';
+
 import {Snippet} from '../../../shared/code/snippet';
 import { NgbdDemoList } from '../../shared';
 import { NgbdOverview } from '../../shared/overview';
@@ -178,6 +180,8 @@ export class NgbdDatepickerOverviewComponent {
     }),
   };
 
+  bootstrapVersion = environment.bootstrap;
+
   sections: NgbdOverview = {};
 
   constructor(demoList: NgbdDemoList) {