diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 425e3c0566651a52288217577c5054069cb12ec0..b73ea0bc2a71f3a2b52fc5faaae303a074e55306 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -41,6 +41,7 @@ import { CalculatorListComponent } from './components/calculator-list/calculator
 import { ApplicationSetupComponent } from './components/app-setup/app-setup.component';
 import { BaseParamInputComponent } from './components/base-param-input/base-param-input.component';
 import { SingleResultComponent } from './components/single-result/single-result.component';
+import { LogEntryComponent } from './components/log-entry/log-entry.component';
 
 const appRoutes: Routes = [
   { path: 'list', component: CalculatorListComponent },
@@ -73,7 +74,7 @@ const appRoutes: Routes = [
     ParamFieldLineComponent, NgParamMinComponent, NgParamMaxComponent, NgParamStepComponent,
     ParamValuesComponent, ValueListComponent,
     SelectFieldLineComponent, CheckFieldLineComponent,
-    LogComponent,
+    LogComponent, LogEntryComponent,
     CalculatorListComponent,
     ApplicationSetupComponent,
     BaseParamInputComponent,
diff --git a/src/app/components/log-entry/log-entry.component.html b/src/app/components/log-entry/log-entry.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b603829536bc89da7a1d9c8a52de720ade88136d
--- /dev/null
+++ b/src/app/components/log-entry/log-entry.component.html
@@ -0,0 +1,11 @@
+<div class="row entry">
+    <div class="col-1" style="text-align: center;">
+        <i *ngIf="levelInfo" class="fa fa-check" style="color:green"></i>
+        <i *ngIf="levelWarning" class="fa fa-exclamation" style="color:orange"></i>
+        <i *ngIf="levelError" class="fa fa-exclamation-triangle" style="color:red"></i>
+    </div>
+    <div class="col-11">
+        <!-- on utilise [innerHTML] pour que les codes HTML comme &nbsp; soient interprÊtÊs correctement -->
+        <span [innerHTML]="text"></span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/log-entry/log-entry.component.ts b/src/app/components/log-entry/log-entry.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..effa2e57a5ffffa5562787dc43b8e5a393a61399
--- /dev/null
+++ b/src/app/components/log-entry/log-entry.component.ts
@@ -0,0 +1,62 @@
+import { Component, Input, OnChanges } from "@angular/core";
+
+import { Message, MessageSeverity } from 'jalhyd';
+
+import { InternationalisationService } from "../../services/internationalisation/internationalisation.service";
+import { ApplicationSetupService } from '../../services/app-setup/app-setup.service';
+
+@Component({
+    selector: "log-entry",
+    templateUrl: "./log-entry.component.html",
+    styles: [`
+        .entry {
+            margin-left: 1em;
+            margin-right: 1em;
+            margin-top: 0.5em;
+            margin-bottom: 0.5em;
+        }
+    `]
+
+})
+export class LogEntryComponent implements OnChanges {
+    @Input("message")
+    private _message: Message;
+
+    /**
+     * message mis en forme
+     */
+    private _text: string;
+
+    constructor(
+        private intlService: InternationalisationService,
+        private appSetupService: ApplicationSetupService
+    ) { }
+
+    /**
+     * appelÊ quand les @Input changent
+     */
+    ngOnChanges() {
+        this.updateText();
+    }
+
+    private updateText() {
+        const nDigits = this.appSetupService.displayDigits;
+        this._text = this.intlService.localizeMessage(this._message, nDigits);
+    }
+
+    private get text(): string {
+        return this._text;
+    }
+
+    private get levelInfo(): boolean {
+        return this._message.getSeverity() == MessageSeverity.INFO;
+    }
+
+    private get levelWarning(): boolean {
+        return this._message.getSeverity() == MessageSeverity.WARNING;
+    }
+
+    private get levelError(): boolean {
+        return this._message.getSeverity() == MessageSeverity.ERROR;
+    }
+}
diff --git a/src/app/components/log/log.component.html b/src/app/components/log/log.component.html
index 90fd45727409a32db29d8773e1cdb925cc3a8f8f..37ecc7a8eb42e8fcccfdf195bfd4cfbd0a3605c3 100644
--- a/src/app/components/log/log.component.html
+++ b/src/app/components/log/log.component.html
@@ -1,11 +1,13 @@
 <div class="row" *ngIf="hasEntries">
     <div class="col-12">
         <div class="hyd_log">
+            <!-- titre -->
             <div class="titre">{{uitextTitreJournal}}</div>
-            <ul *ngFor="let r of _logEntries">
-                <!-- on utilise [innerHTML] pour que les codes HTML comme &nbsp; soient interprÊtÊs correctement -->
-                <li [innerHTML]="r"></li>
-            </ul>
+
+            <!-- entrÊes du journal -->
+            <ng-template ngFor let-m [ngForOf]="messages">
+                <log-entry [message]=m></log-entry>
+            </ng-template>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/log/log.component.ts b/src/app/components/log/log.component.ts
index 43fb0471793cdd40bc18d489052224696d2b2ea7..93d567509a15cf1230395e10b361dda9e2c8f1ed 100644
--- a/src/app/components/log/log.component.ts
+++ b/src/app/components/log/log.component.ts
@@ -1,11 +1,8 @@
 import { Component } from "@angular/core";
 
-import { Message, cLog } from 'jalhyd';
+import { cLog, Message } from 'jalhyd';
 
-import { NgParameter } from "../../formulaire/ngparam";
 import { InternationalisationService } from "../../services/internationalisation/internationalisation.service";
-import { ApplicationSetupService } from '../../services/app-setup/app-setup.service';
-
 
 @Component({
     selector: "log",
@@ -37,14 +34,8 @@ export class LogComponent {
      */
     private _log: cLog;
 
-    /**
-    * entrÊes du journal mises en forme
-    */
-    private _logEntries: string[];
-
     constructor(
         private intlService: InternationalisationService,
-        private appSetupService: ApplicationSetupService
     ) { }
 
     private get uitextTitreJournal() {
@@ -52,20 +43,14 @@ export class LogComponent {
     }
 
     private get hasEntries(): boolean {
-        return this._logEntries != undefined && this._logEntries.length != 0;
+        return this._log != undefined && this._log.messages.length != 0;
     }
 
-    private generateEntries() {
-        this._logEntries = [];
-        if (this._log != undefined) {
-            const nDigits = this.appSetupService.displayDigits;
-            for (let m of this._log.messages)
-                this._logEntries.push(this.intlService.localizeMessage(m, nDigits));
-        }
+    private get messages(): Message[] {
+        return this._log.messages;
     }
 
     public set log(log: cLog) {
         this._log = log;
-        this.generateEntries();
     }
 }